js实现纯前端压缩图片
程序员文章站
2022-04-09 16:57:09
本文实例为大家分享了js实现纯前端压缩图片的具体代码,供大家参考,具体内容如下分析:原理是用canvas的生成的图片,控制其大小来进行图片的压缩,需要注意的是,如果图片的尺寸太小,会导致图片模糊,使用...
本文实例为大家分享了js实现纯前端压缩图片的具体代码,供大家参考,具体内容如下
分析:原理是用canvas的生成的图片,控制其大小来进行图片的压缩,需要注意的是,如果图片的尺寸太小,会导致图片模糊,使用时候,注意设置其比例控制。
1、通过filereader读取图片文件,用 image来装图片url(可以用来预览)
2、转化成base64字符串模式
3、通过maxwidth,maxheight和比例来控制最终的canvas的宽高
4、用canvas画图
5、在把canvas输出blob文件,进行上传
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
node.js中实现kindEditor图片上传功能的方法教程
-
如何用js 实现依赖注入的思想,后端框架思想搬到前端来_javascript技巧
-
js实现每日自动换一张图片的方法_javascript技巧
-
js或者jquery判断图片是否加载完成实现代码_javascript技巧
-
js 图片随机不定向浮动的实现代码_javascript技巧
-
php+js实现图片的上传、裁剪、预览、提交示例
-
简单实现JS上传图片预览功能
-
上传图片预览JS脚本 Input file图片预览的实现示例_javascript技巧
-
js实现图片切换(动画版)
-
php使用imagick模块实现图片缩放、裁剪、压缩示例_PHP