用react模仿知乎的用户头像裁剪组件
用react模仿知乎的用户头像裁剪组件
前段时间刷知乎的时候，更换换了下头像，突然发现知乎头像编辑器很简洁酷炫，于是乎就用react尝试模仿做一个组件。
知乎上的这个是用canvas处理的，但是用div做也是可以，简单的布局一下，其实就是用几个div而已，但是呢，有个点我这里的。阴影层下的图片跟清晰的图片是两张图片，只是用top,left定位让这两张图片看起来像一张图片。
这个组件首先是要用到拖拽的功能，网上找的包感觉都不太合适，于是自己就简单封装了一个，现在已经发布到npm（react-simple-draggable），githup地址。
由于我封装的拖拽组件可以限定的拖拽的区域，所以就可以很容易的动态设置，拖拽显示的无非就是图片大小的区域，初始化的时候，规定宽或者高是100%，高度或者宽度自适应，因为图片为长方形的时候，有横向的和竖向的，我们可以一开始获取图片的宽高，判断是横向的还是竖向的
除此之外，还要获取到图片的真实大小的size,因为要是提交的使用总不能把，‘100%’，‘auto’这些提交到后端。
完成初始化的逻辑并不太复杂，下面到放大缩小的逻辑了。放大缩小的逻辑其实也很简单，无非就是把放大缩小的比例乘于原始的宽度，但是放大缩小后的图片的可拖拽区域也要发生变化：
至于为什么加上要用80（图片的中点）去乘于比值的差（preRatio是前一次拖拽的比例）是为了让图片放大缩小是以图片中心的位置为原点，这样视觉效果会好看很多。此外，这里还处理了一些特殊的情况，比如说，缩放的时候，图片的位置可能会不在可视区的区域内，所以要做一些限制，当left的绝对值小于图片的宽度时，就是偏离了可视区域，这里要做一下修正。
如果想使用这个组件可以clone下来，参考demo中的例子，把lib下的文件复制到你的项目中就可以使用了（这个组件已经打包好了），但是出现问题作者概不负责- -！您也可以基于作者的基础再做修改（src文件夹下），每次修改记得npm run build（npm start 是打包demo） 打包下哦！
这个小组件已经上传到githup上了，这里是demo的地址，这里是githup的地址，欢迎提issue！路过希望帮忙点个star哦！
日积月累，一起成长！
原文https://zhuanlan.zhihu.com/p/67155526
用react模仿知乎的用户头像裁剪组件相关推荐
- cropbox php,jQuery用户头像裁剪插件cropbox.js实例分享
本文主要为大家详细介绍了jQuery用户头像裁剪插件cropbox.js的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 几乎每一个网页是必备图片上传,图片裁剪功能,这 ...
- 头像裁剪框html css,GitHub - saintic/layui-cropper-avatar: Layui头像裁剪组件
layui-cropper-avatar Layui头像裁剪组件 说明 这是一款适用于Layui的[微改整合]第三方组件,基于cropper 3.1.3,实现点击一个按钮弹出裁剪框,完成选择.裁剪图片 ...
- vue-avatar-tailor，vue头像裁剪组件
项目简介 本组件是vue下的头像裁剪组件,可以直接拷贝代码使用,无需安装依赖 使用九宫格进行裁剪,自由选择裁剪区域. 实时预览裁剪后效果. 可以将裁剪好的图片,导出为封装好的file文件,直接上传到服 ...
- iOS 图片裁剪(用户头像裁剪)
图片裁剪 把一张图片裁剪为指定的样式,比如常见的用户头像 思路: 在图片的基础上绘制时,需要创建一个位图上下文 确定裁剪区域(超出裁剪区域的都将被清除) 绘制图片 从位图上下文中获取图片 关闭上下文 ...
- 微信小程序获取用户头像昵称组件封装（最新版）
一.前言 微信小程序将在2022年11月08日对获取用户头像昵称信息的API再一次进行改动,这次的改动比较大. 更多详情查看公告:公告直达链接 我的项目比较多,而且大部分都是只需要获取用户的头像以及昵 ...
- WPF实现用户头像裁剪
WPF开发者QQ群: 340500857 前言 需要做一个用户选择头像并进行裁剪. 欢迎转发.分享.点赞,谢谢大家~. 效果预览(更多效果请下载源码体验): 一.MainWindow.xaml代码 ...
- 头像裁剪框html css,CSS3 clip-path实现的用户头像裁剪效果
HTML 导入代码模板: Susan Sanddollar Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa sunt p ...
- 编写一个头像裁剪组件（一）
需求是编写一个头像剪裁工具再封装成为一个组件,然后根据功能开始逐步编写代码:先是上传图片 => 预览图片 => 编辑图片. 刚开始没有去考虑兼容性的问题,直接编写upload部分的代码,参 ...
- mysql 存储用户头像_node+vue用户头像处理上传并保存
2017年7月14日19:21:29 ,最近做个网站,需要有用户头像裁剪上传功能,具体流程是用户在本地选择图片,前端将图片裁剪好发给后端,后端接收到图片将它保存起来,并将信息存入数据库. 先说一下环境 ...
最新文章
- mysql密码有格式要求吗_高考日语作文10个格式要求！你能看出图中5处错误吗？...
- [mysql] mysql-myibatis-整理
- poj2104(区间第k大+离散化)
- Linux下区分物理CPU、逻辑CPU和CPU核数
- python 编程语言排行榜_2019年6月编程语言排行榜：Python 排名飙升，三年内有望超越Java...
- python3 输入输出_Python3基础之输入和输出实例分析
- LeetCode 1257. 最小公共区域（最小公共祖先）
- 先富带动后富：雷军带领一大批程序员发家致富
- 【刷题】LOJ 6007 「网络流 24 题」方格取数
- request用法_urllib的基本用法
- 插件开发之360 DroidPlugin源码分析（四）Activity预注册占坑
- Atitit jOrgChart的使用 组织架构图css html
- redhat 安装 snort
- mysql数据库库推荐书籍
- ERP系统多少钱一套？不同情况详情分析告诉你！
- ArcGIS之经纬度表格数据转矢量
- 【旁门Python 01】什么是wheel包，如何去用它？
- web前端基础——过渡效果
- Utility Manager 的一些基本使用
- 简述DRAM与SRAM的区别