实现HTML5 裁剪图片并上传

个人制作图片裁剪的问题总结

在一个上传图片进行打印的项目当中，由于用户上传的图片形状比例千奇百怪，所以需要前端做一个图片裁剪功能。刚开始觉得挺简单的就是做图片裁剪功能，网上的插件一大堆，随便找一个套上就ok啦。
然而，发现了很多问题：
1.插件的兼容性（推荐cropper）
找裁剪插件过程中是有很多，然而把它们放在手机上测试的时候发现，有些并不能适应手机的触摸效果，安卓和苹果手机的兼容性不好，所以最终选择了cropper.js
2.在传数据给后台的时候发现canvas.toDataURL()会产生特别长的字符串，所以想了各种方法，在网上把base64制编码变成二进制，
在利用fromData()进行传递二进制文件给后台。发现浏览器传递文件有限制，后来找了把二进制变为分片进行传递,虽然传递过去了，但是发现加重服务器的负担也没有减少后台的压力。

插件库的地址：
https://github.com/fengyuanchen/cropper/blob/master/README.md
其中参考的地址有：
http://blog.csdn.net/ztop_f/article/details/53219275
导出HTML5 Canvas图片，并上传服务器
http://www.cnblogs.com/bbbiu/p/6760505.html
图片裁剪(cropper)后上传问题
http://www.cnblogs.com/shinefon-2-2/p/5901330.html
前端获取图片压缩后上传给后台
blob对象的介绍
https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

fromData对象的介绍
https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

3.由于生成的图片需要边框，如何给canvas描虚线的边框
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#0000ff";
ctx.setLineDash([6, 6]); //设置虚线长度(虚线长度，虚线间隔)
ctx.strokeRect(20,20,150,100);//绘制虚线的区域

4.drawImage的用法
ctx.drawImage(image, dx, dy);
ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
ctx.drawImage(image, 选择原图片的起点x坐标, 选择原图片的起点y坐标, 选择原图片的宽度, 选择原图片的高度, 在画布开始绘制图片的起点x坐标, 在画布开始绘制图片的起点y坐标, 在画布开始绘制图片的宽度, 在画布开始绘制图片的高度);

5.不同的浏览器对于上传的blob数据的大小有不同的限制

总结：
1.利用canvas获取图像地址传递给后台的限制：图像的大小不要太大最好不要超过2M；
2.可以推荐传递裁剪图片的坐标给后台；
3.前端利用canvas裁剪图片其实就是生成新的图片，所以在保证清晰度和图片相近的时候，会发现生成的图片质量会比以前的大；
4.利用canvas压缩图片也就意味着生成图片的大小会变的更小；
5.裁剪图片适合应用于头像剪辑。重点内容