js压缩图片的实现原理及实现过程

2026-01-22 0 43,266

本文教程操作环境:windows7系统、jquery3.2.1版本,DELL G3电脑。

一、压缩原理

js实现对上传图片的路径转成base64编码,把图片用canvas画出来再转成二进制数据,降低分辨率,并且对图片进行压缩。

二、具体实现

第一步:通过input标签获取本地图片

第二步:把获取到的图片转换成base64格式

let fileObj = document.getElementById('file').files[0] //获取文件对象 
let reader = new FileReader() //新建一个FileReader对象 
reader.readAsDataURL(fileObj)//将读取的文件转换成base64格式 
reader.onload = function(e) { console.log(e.target.result) //转换后的文件数据存储在e.target.result中 }

第三步:使用canvas中的API把图片分辨率调低

context.drawImage(image, 0, 0, imageWidth, imageHeight)

注意:canvas只能处理base64格式的图片

以上就是js压缩图片的实现原理及实现过程,大家可以套用上述代码压缩图片,不过要理解压缩原理哦~

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:以上部本文内容由互联网用户自发贡献,本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。投诉邮箱:3758217903@qq.com

ZhiUp资源网 web开发 js压缩图片的实现原理及实现过程 https://www.zhiup.top/10131.html

相关