react打包后图片丢失_用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哦！

日积月累，一起成长！