js实现纯前端压缩图片

本文实例为大家分享了js实现纯前端压缩图片的具体代码，供大家参考，具体内容如下

分析：原理是用canvas的生成的图片，控制其大小来进行图片的压缩，需要注意的是，如果图片的尺寸太小，会导致图片模糊，使用时候，注意设置其比例控制。

1、通过FileReader读取图片文件，用 Image来装图片url（可以用来预览）
2、转化成base64字符串模式
3、通过maxWidth,MaxHeight和比例来控制最终的canvas的宽高
4、用canvas画图
5、在把canvas输出blob文件，进行上传

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。