image-process-tools

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

修复触摸冒泡和滚动冒泡。
修复添加图片后，某些比例下图片小于裁剪框的问题。
优化添加图片后，根据裁剪框调整图片缩放。
修复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});
}

移动端添加图片裁剪的坑

AlloyCrop

不适配 pc 端滚轮缩放。

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