android 固定比例图片裁剪插件,移动端添加图片裁剪的坑

本文关键：阻止冒泡、canvas压缩、canvas裁剪、生成黑色图片。

最近项目需要在添加图片时实现裁剪功能，虽然 github 上开源的裁剪插件不少，试了好几个插件，在移动端体验好的寥寥无几。躺了几个坑，分别说一下。

好像是腾讯团队做的一个插件，网上推荐度还挺高的，但是我在上手测试的时候发现，一些问题：

不适配 pc 端滚轮缩放。

裁剪时无法缩小图片，只能放大。(这也是我放弃它的原因)

它依赖 transfrom.js 和 AlloyFinger ，源码看起来我比较难懂，所以就没继续深入研究。

本文着重讲的是这个，也是现在正在使用的，因为初步尝试来说样式操作等各方面体验都挺不错，就决定要把这个坑趟平。首先说说填了哪些坑：

修复触摸冒泡和滚动冒泡。

修复添加图片后，某些比例下图片小于裁剪框的问题。

优化添加图片后，根据裁剪框调整图片缩放。

修复iOS端有透明部分变黑图的问题。

未解决：旋转图片后，不会贴合裁剪框的问题。

下面来逐个解析

touch 冒泡、wheel 冒泡

这是最先发现的问题，裁剪图片过程中拖动图片，touch 事件冒泡使遮罩后的页面滚动并且阻塞了图片的移动。而在 pc 端测试时发现，同样问题发生在使用滚轮缩放图片的操作下。

其实解决办法也很简单，就是添加 e.stopPropagation() ，但实际上，查看源码发现在事件绑定上作者使用的 addEvent() 方法，所以没有办法使阻止冒泡生效(原因在 我另一篇文章 的开头有提到)。把该方法改成：

$(document).addEventListener( 'scroll', fun, {passive: false} )

必须传入 false 选项后 ，就可以正常阻止事件冒泡了。

图片放置后小于裁剪框

这是个小问题，但会导致下一个大问题。出现原因是，放置图片时，插件首先会计算图片宽高比与窗口宽高比的关系，决定以宽或高为标准缩放放置图片，设定图片宽高值，随后会进一步与裁剪框比较，而在这一步作者获取错误的宽高导致不能根据裁剪框调整图片，最终的效果就是图片只适应了窗口，而宽或高小于裁剪框的情况，把获取值修正即可。

其实如果图片完全贴着裁剪框挺丑的(特别是方形图配方形裁剪框)，优化一些判断条件，使得图片可以比裁剪框大一圈，整个感觉好多了，也更好的表达了裁剪的意图。

iOS 端最终只获得了黑图

这个就是最大的坑了，有时候裁剪完之后，输出展示的是一张纯黑无内容的图片(其实就是一张透明图)，坑就坑在一直找不到原因，只有 iOS 上会有概率出现，pc 端及 Android 则完全不会。后来发现规律后马上就解决了，现在尝试简单的解释一下原因：

裁剪原理：根据坐标及宽高截取当前 canvas 的图像然后生成一个新的 canvas 然后再输出成 base64 得到图片。

本质原因：在截取当前 canvas 时，某一个坐标 点在了 canvas 外，导致无法获取图像。

问题原因：图片的分辨率并不是整数(压缩，比例缩放等原因、甚至图片本身原因)，比如 500 x 499.5，在 iOS 上识别的 500 x 500，当截取 canvas 时(500，500)这个点并不在 canvas 内导致获取不到。而其他设备上获取到图片的分辨率为 500 x 499 所以不存在这个问题。

解决办法：在源码截取当前 canvas 的方法中，定义起点和截取范围的参数中，向内补偿 1 个像素(+-1)来补偿 iOS 上可能出现的问题。

旋转后与裁剪框产生了距离

因为旋转时以图片中心为原点的，放大拉到一边后旋转，就会偏了。出现这个问题原因很简单，就是旋转后没有执行贴合边框的方法。但是由于执行这个方法所需的参数计算起来比较复杂，我就展示先放一放了。

摘要

base64 转文件

function dataURLtoFile(dataurl, filename) { //将base64转换为文件

var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],

bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);

while(n--){

u8arr[n] = bstr.charCodeAt(n);

}

return new File([u8arr], filename, {type:mime});

}