H5实现图片先压缩再上传

现在一般手机拍的照片都有几M,图片太多不仅占用空间大,而且也会影响上传速度,故上传图片前进行压缩就很有必要了。

解决思路

利用canvas进行图片压缩,canvas的toDataURL方法的第二个参数是图片质量,通过取不同的图片质量来达到压缩的效果。

解决步骤

1、获取到图片的base64格式。
2、等到图片加载完成后,将图片画到canvas上。
3、利用canvas的toDataURL方法来实现压缩。
4、将dataURL转换成Bolb对象。
5、将Bold对象转换成formData对象。
6、通过ajax发送给后台。

代码

图片压缩
(1)需要在图片加载完毕后才进行压缩

(2)把图片绘制到canvas上去

图片上传
(3)dataURL转换为Bold对象或File对象
File继承于Blob,扩展了一些属性(文件名、修改时间、路径等)。绝大多数场景下,使用Bolb对象就可以了。兼容性:Edge浏览器不支持File对象构造函数,也就是Edge里不能new File()。 这里以dataURL转Bold对象为例。

(4)将Bold对象转换成formData对象,并提交

 

转自https://www.jianshu.com/p/18ad07a47967


发表评论

电子邮件地址不会被公开。 必填项已用*标注