小猿圈入门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前端开发内容的朋友可以关注小猿圈的每天的动态,会不定时更新很多更好的内容奉献给大家,希望对你的学习有所帮助。

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

相关推荐