canvas 图片压缩上传

Question

因为要做图片压缩上传 所以在网上找一些资料 看见canvas可以做到 但是里面的这个 toBlob 方法还有里面的形参 实在不知道是干什么的 要传给后台吗？可以这么上传吗 不是传给后台 new FileReader()onload方法的 target.result base64的编码吗

Answer 1

1. 监听一个 input (type='file') 的 change 事件，然后拿到文件的 file;
2. 把 file 转成 dataURL；
3. 然后用 canvas 绘制图片，绘制的时候经过算法按比例裁剪;
4. 然后再把 canvas 转成 dataURL;
5. 再把 dataURL 转成 blob;
6. 接着把 blob append 到 FormData 的实例对象。
7. 最后上传。

主要用到的 FileReader、canvas、FormData、Blob 这几个 API。

Answer 2

1. 通过input file选择图片文件
2. 将这张图片通过canvas绘制到页面上
3. 提供一个滑杆给用户调节canvas.toDataURL("image/jpeg", 0.1);传给toDataURL第二个参数的值（也就是图片质量，图片尺寸大小会随着调整）
4. 然后toDataURL会返回base64，这个可以直接用ajax发给后台，后台能够很轻松的将其存为图片