javascript - canvas 图片压缩上传

问题描述

问 题

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

解决方案

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。

这篇关于javascript - canvas 图片压缩上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！