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。