欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js实现纯前端压缩图片

程序员文章站 2024-01-08 13:05:22
本文实例为大家分享了js实现纯前端压缩图片的具体代码,供大家参考,具体内容如下分析:原理是用canvas的生成的图片,控制其大小来进行图片的压缩,需要注意的是,如果图片的尺寸太小,会导致图片模糊,使用...

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

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

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

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

相关标签: js 压缩图片