项目中做身份证识别时，须要传送图片的base64格式编码，但是手机拍摄的照片都太大了，转成base64切实其实恐怖，因此找了一下办理办法。
涉及到的知识点
onchange事宜是在上传完文件之后触发
利用files属性获取到上传的文件工具
readAsDataURL用于转换成base64编码
区分canvas的画布和绘画环境：
画布：对应代码中的cvs，可以设置画布width，height;
绘画环境：对应代码中的ctx，可以设置fillStyle，fillRect等;
利用canvas自带的drawImage()方法将图片画到canvas上
想取到压缩后图片的base64可以利用canvas自带的toDataURL()方法
完全代码
<!DOCTYPEhtml>
<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前端开拓内容的朋友可以关注小猿圈的每天的动态，会禁绝时更新很多更好的内容奉献给大家，希望对你的学习有所帮助。
