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

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

一、压缩原理

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

二、具体实现

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

<inputid="file"type="file">

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

letfileObj=document.getElementById('file').files[0]//获取文件对象
letreader=newFileReader()//新建一个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格式的图片

原文来自：https://www.py.cn