小猿圈入门html5教程之利用canvas实现图片压缩方法

现在学习前端你的小伙伴都在迷茫遇到问题，找不到老师怎么办？这些也是小猿圈web前端老师担心的，以后每天小猿圈都会为大家分享一些关于学习前端中的一些小问题，今天分享的是利用canvas实现图片压缩方法。

项目中做身份证识别时，需要传送图片的base64格式编码，但是手机拍摄的照片都太大了，转成base64简直可怕，因此找了一下解决办法。

涉及到的知识点

onchange事件是在上传完文件之后触发

使用files属性获取到上传的文件对象

readAsDataURL用于转换成base64编码

区分canvas的画布和绘画环境：

画布：对应代码中的cvs，可以设置画布width，height;

绘画环境：对应代码中的ctx，可以设置fillStyle，fillRect等;

使用canvas自带的drawImage()方法将图片画到canvas上

想取到压缩后图片的base64可以使用canvas自带的toDataURL()方法

完整代码

---

800×449，544KB

---

400×224，157KB

关于压缩后的图片大小

这里提供一个开箱即用的方法，baseStr是一个完整的Base64编码

代码：

functioncalcBase(baseStr){

vartag='base64,';

baseStr=baseStr.substring(baseStr.indexOf(tag)+tag.length);

vareqTagIndex=baseStr.indexOf('=');

baseStr=eqTagIndex!=-1?baseStr.substring(0,eqTagIndex):baseStr;

varstrLen=baseStr.length;

varfileSize=strLen-(strLen/8)*2;

console.log("文件大小:"+(fileSize/1024).toFixed(1)+'KB');

}

今天的知识点就分享到这里了，有需要的朋友欢迎点赞评论转发，想了解更多web前端开发内容的朋友可以关注小猿圈的每天的动态，会不定时更新很多更好的内容奉献给大家，希望对你的学习有所帮助。