微客导航 » 文章资讯 » js实现纯前端压缩图片

js实现纯前端压缩图片

2023-07-11 16:51:03 150

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






压缩图片

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

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

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