canvas压缩图片上传,canvas 图片缩放

　　项目中做身份证识别时，需要传送图片的base64格式编码，但是手机拍摄的照片都太大了，转成base64简直可怕，因此找了一下解决办法

　　涉及到的知识点

　　待清扫房事件是在上传完文件之后触发使用文件属性获取到上传的文件对象readAsDataURL用于转换成base64编码区分帆布的画布和绘画环境：画布：对应代码中的简历，可以设置画布宽度、高度；绘画环境：对应代码中的ctx，可以设置fillStyle，fillRect等；使用帆布自带的drawImage()方法将图片画到帆布上想取到压缩后图片的base64可以使用帆布自带的toDataURL()方法完整代码

　　！DOCTYPE html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，initial-scale=1.0 meta http-equiv= X-UA-Compatible content= ie=edge title/head body input type= file on change= loadImg(this) HR div 800449，544 kb/div img src= alt= HR div 400224，150上传图片函数loadImg(me){ let img=document。查询选择器(“img”)；让CVS=document。查询选择器(“画布”)；让文件=我。文件[0]；//获取到文件对象//上传的图片大于500KB时才压缩如果(文件(文件。size/1024 500)){ let reader=new FileReader()；reader.readAsDataURL(文件);//转成base64编码读者。onload=函数(e){设自然基数64=e . target。结果；//获取base64编码，这是原图的img。src=天然碱64；img。onload=function(){ let ratio=img。自然宽度/img。自然高度；//获取原图比例，为了等比压缩宽度=400CVS。身高=CVS。宽度/比率；设CTX=简历。获取上下文(“2d”)；ctx.drawImage(img，0，0，cvs.width，cvs。身高)；//画在帆布上//压缩后新图的base64让zipbase 64=CVS。toda taurl()；} } } }/脚本/正文/html效果图

　　关于压缩后的图片大小

　　这里提供一个开箱即用的方法，baseStr是一个完整的Base64编码，就是包括

　　base64

　　代码：

　　函数calc base(baseStr){ var tag= base64，；baseStr=baseStr。子字符串(baseStr。标签的索引。长度)；var eqTagIndex=basestr。(“=”)的索引；baseStr=eqTagIndex！=-1?baseStr.substring(0，eqTagIndex):baseStr；var strLen=basestr . length var fileSize=strLen-(strLen/8)* 2；console.log(文件大小：(文件大小/1024)。to fixed(1)“KB”)；}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。