技术文章 > Web开发 >  JavaScript > 正文

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

宋宋大人

我们知道,对于你非常清晰的图片,它所占内存十分大,一般我们会使用压缩将图片存放在我们的手里。在JavaScript中,也可以对图片进行压缩。本文介绍js压缩图片的实现原理及实现过程。

一、压缩原理

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

二、具体实现

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

<input id="file" type="file">

第二步:把获取到的图片转换成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压缩图片的实现原理及实现过程,大家可以套用上述代码压缩图片,不过要理解压缩原理哦~

免费视频教程
本文原创发布python学习网,转载请注明出处,感谢您的尊重!
相关文章
 如何使用python中的optionparser模块?
 python pexpect模块是什么?
 python中的binascii模块是什么?
 Python中PIL库有何用法?
 python中缺少module怎么办?
相关视频章节
 Python概述
 解决提示“‘python’不是内部或外外部命令
 python命名规范
 Python语言简介
视频教程分类