html2canvas压缩图片,html5前端压缩图片

　　前两天做了一个上传图片到base64的功能，发现如果图片的base64太大，请求会变得很慢，会直接超时，于是想到先压缩图片再上传，然后再上传到后台，这样可以大大提高效率。在这里，我将记录一些用画布压缩图像时遇到的坑。文章最后会给出完整的代码。

　　第一个坑，压缩图像时没有得到图像本身的宽度和高度，给出了600*480的固定宽度和高度。因为是在手机上，上传图片的时候有好几兆的图像，所以这个没毛病。问题是修改头像时，测试时上传的图片都是小图，然后压缩后的图片显示不完整，大部分是空白的。这是因为在压缩过程中没有考虑图片的原始宽度和高度。

　　第二个坑，第一个坑的解决方法，是在图像加载(onload)后，获取图像本身的宽度和高度，然后赋给canvas。这样做了，但是有个坑，就是镜像加载是异步的，返回的时候可能会返回undefined而不是你需要的压缩base64。这里的解决方案是创建一个新的承诺，然后返回结果resolve()和。然后()会在被调用时得到结果。

　　知识点：

　　画布的toda utall( image/png ，0.9)；将画布绘制的图片转换为base64。第一个参数表示图片的类型，第二个参数表示图片的清晰度。指定最大尺寸。如果图片本身的宽度和高度大于这个尺寸，就按照最大的边进行缩放，另一个按照图片的比例设置，然后设置为canvas.miniimage.js。

　　导出默认异步函数微型(imgData，maxSize=200 * 1024){//const maxSize=200 * 1024；if(img data img data . files img data . files . size maxSize){ return img data . URL；} else { console . log(-)；const canvas=document . createelement( canvas )；设img=new Image()；img . src=img data . URL；let CTX=canvas . get context( 2d )；return new promise((resolve={ img . addevent listener( load ，function(){//图片原始大小let originWidth=this.width设originHeight=this.height//最大大小限制let maxWidth=400，maxHeight=400//目标大小让目标宽度=原点宽度，目标高度=原点高度；//图片大小超过了400x400的限制if(原点宽度maxwidth 原点高度maxheight) {if(原点宽度/原点高度maxWidth/max height){//更宽，根据宽度targetWidth=maxWidth限制大小；target height=math . round(maxWidth *(origin height/origin width))；} else { targetHeight=maxHeighttarget width=math . round(max height *(origin width/origin height))；} } canvas.width=目标宽度；canvas.height=targetHeightctx.drawImage(img，0，0，targetWidth，target height)；let base64=canvas . toda taurl( image/png ，0.9)；resolve(base64)；}，假)；})}}通话：

　　测试. js

　　onChangeImg=async (files，type，index)={ let previous=this . props . image picker . files；if(type===add) { let result=微型(files[files . length-1])；//调用。then()得到结果await result . then(RES={ previous . push({ URL:RES })；});} else if(type=== remove ){ previous . splice(index，1)；}等待这个。props.dispatch ({type:图像拾取器/保存图像，有效载荷：{files: previous}}}以上是本文的全部内容。希望对你的学习和你的支持有帮助。

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