|
现在学习前端你的小伙伴都在迷茫遇到问题，找不到老师怎么办？这些也是小猿圈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前端开发内容的朋友可以关注小猿圈的每天的动态web前端自学②群：738735873，会不定时更新很多更好的内容奉献给大家，希望对你的学习有所帮助。
| 
QQ群⑧：
窥视卡
雷达卡
发表于 2019-5-23 17:50:58
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡