在线图片裁剪，关于使用cropperjs踩过的坑

最近在做一个项目，其中包括了一个图片在线裁剪功能，于是找到了cropperjs，cropperjs的裁剪功能丰富，满足了各种需求，预览链接：cropperjs预览

裁剪图片的两种思路：
1.在前端裁剪，通过html5的HTMLCanvasElement.toBlob方法，把裁剪后的图片通过表单方式用ajax提交给后台，或者使用HTMLCanvasElement.toDataURL 把图片转换为base64提交到后台。
2.在后台裁剪，在前端裁剪后把裁剪的坐标和裁剪之前的原图发送到后台，让后台执行裁剪，把裁剪后的图片返回

以上两种方法使用cropperjs都是支持的，自己选择了第一种方案，减轻后台工作。

第一次使用HTMLCanvasElement.toDataURL以base64的方式把数据提交到后台，结果发现base64的串实在是太长了，和后台通讯非常耗时：

放弃base64

然后使用HTMLCanvasElement.toBlob方法，构造了一个表单，提交给后台，发现报了413的错误

413是Nginx返回的，然后查了一下Nginx的配置：

最大上传的10M，看了一下上传的原图才1.75M,这不应该有413

看了看http请求,发现图片大小17M多，比裁剪前的原图还大，图片格式是png

翻了一下官方的文档，HTMLCanvasElement.toBlob()有三个参数，第一个是回调函数，第二个是图片的格式，默认是png，第三个是图片的质量，到这里，明白了为什么产生413，因为裁剪前的原图是jpg，裁剪后变成了png，而同样一张图片，png比jpg要大得多，所以才会出现裁剪后比原图大的情况

到这里就好办了，把第二个参数传进去，图片格式为image/jpeg，图片裁剪上传成功

在后来，发现360浏览器竟然不支持toBlob

在GitHub上面搜索了相关问题，最终发现一个兼容方案：https://github.com/blueimp/JavaScript-Canvas-to-Blob，具体实现看作者的源码，一百多行。

到这里，在线图片裁剪，算是实现了，贴一下效果图和源码：

done