小猿圈入门html5教程之利用canvas实现图片压缩方法
现在学习前端你的小伙伴都在迷茫遇到问题，找不到老师怎么办？这些也是小猿圈web前端老师担心的，以后每天小猿圈都会为大家分享一些关于学习前端中的一些小问题，今天分享的是利用canvas实现图片压缩方法。https://upload-images.jianshu.io/upload_images/15397392-cce5073e58d613d7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240项目中做身份证识别时，需要传送图片的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;//获取到文件对象//上传的图片大于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上//压缩后新图的base64letzipBase64=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前端开发内容的朋友可以关注小猿圈的每天的动态web前端自学②群：738735873，会不定时更新很多更好的内容奉献给大家，希望对你的学习有所帮助。
页:
[1]