现在学习前端你的小伙伴都在迷茫遇到问题,找不到老师怎么办?这些也是小猿圈web前端老师担心的,以后每天小猿圈都会为大家分享一些关于学习前端中的一些小问题,今天分享的是利用canvas实现图片压缩方法。
项目中做身份证识别时,需要传送图片的base64格式编码,但是手机拍摄的照片都太大了,转成base64简直可怕,因此找了一下解决办法。
涉及到的知识点
onchange事件是在上传完文件之后触发
使用files属性获取到上传的文件对象
readAsDataURL用于转换成base64编码
区分canvas的画布和绘画环境:
画布:对应代码中的cvs,可以设置画布width,height;
绘画环境:对应代码中的ctx,可以设置fillStyle,fillRect等;
使用canvas自带的drawImage()方法将图片画到canvas上
想取到压缩后图片的base64可以使用canvas自带的toDataURL()方法
完整代码
//上传图片
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();
}
}
}
}