我们知道,对于你非常清晰的图片,它所占内存十分大,一般我们会使用压缩将图片存放在我们的手里。在JavaScript中,也可以对图片进行压缩。本文介绍js压缩图片的实现原理及实现过程。
一、压缩原理
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压缩图片的实现原理及实现过程,大家可以套用上述代码压缩图片,不过要理解压缩原理哦~