小猿圈入门html5教程之利用canvas实现图片压缩方法
yaosir 2019-05-24
现在学习前端你的小伙伴都在迷茫遇到问题，找不到老师怎么办？这些也是小猿圈web前端老师担心的，以后每天小猿圈都会为大家分享一些关于学习前端中的一些小问题，今天分享的是利用canvas实现图片压缩方法。
项目中做身份证识别时，需要传送图片的base64格式编码，但是手机拍摄的照片都太大了，转成base64简直可怕，因此找了一下解决办法。
涉及到的知识点
onchange事件是在上传完文件之后触发
使用files属性获取到上传的文件对象
readAsDataURL用于转换成base64编码
区分canvas的画布和绘画环境：
画布：对应代码中的cvs，可以设置画布width，height;
绘画环境：对应代码中的ctx，可以设置fillStyle，fillRect等;
使用canvas自带的drawImage()方法将图片画到canvas上
想取到压缩后图片的base64可以使用canvas自带的toDataURL()方法
完整代码
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
</head>
<body>
<inputtype="file"onchange="loadImg(this)">
<hr>
<div>800×449，544KB</div>
<imgsrc=""alt="">
<hr>
<div>400×224，157KB</div>
<canvas></canvas>
<script>
//上传图片
functionloadImg(me){
letimg=document.querySelector('img');
letcvs=document.querySelector('canvas');
letfile=me.files[0];//获取到文件对象
//上传的图片大于500KB时才压缩
if(file&&(file.size/1024>500)){
letreader=newFileReader();
reader.readAsDataURL(file);//转成base64编码
reader.onload=function(e){
letnaturalBase64=e.target.result;//获取base64编码，这是原图的
img.src=naturalBase64;
img.onload=function(){
letratio=img.naturalWidth/img.naturalHeight;//获取原图比例,为了等比压缩
cvs.width=400;
cvs.height=cvs.width/ratio;
letctx=cvs.getContext('2d');
ctx.drawImage(img,0,0,cvs.width,cvs.height);//画在canvas上
//压缩后新图的base64
letzipBase64=cvs.toDataURL();
}
}
}
}
</script>
</body>
</html>
关于压缩后的图片大小
这里提供一个开箱即用的方法，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前端开发内容的朋友可以关注小猿圈的每天的动态，会不定时更新很多更好的内容奉献给大家，希望对你的学习有所帮助。
