用于使用画布压缩图像的Html5示例代码

1、用于使用画布压缩图像的html5示例代码前俩天做了一个转base64上传的功能，发觉假片的base64过大的话，哀求会变的很慢，严峻的挺直超时了，所以想到了在上传前压缩一下，然后再上传到后台，这样可以大大的提高效率，在这里记录一下利用 canvas 压缩碰到的几个坑。完整代码会在文末给出。第一个坑，在压缩的时候没猎取本身的宽高，给了一个 600*480 的定宽定高，由于是手机端的，在上传的时候都是几兆的，所以这块没任何问题。出问题的地方在 修改头像的时候，测试的时候上传的都是小，然后就浮现了 压缩后的显示不彻低，大部分都是空白的现象，这就是由于在压缩的时候没有考虑原本的宽高的状况。其次个坑，解

2、决第一个坑的方法就是在加载完成后（onload），猎取本身的宽高，然后赋值给 canvas ,这样举行操作，但是这有个坑就是，加载是异步的，在你 return 的时候，返回的可能是 undefined 而不是你需要的 压缩后的 base64。这里的解决办法是，新建一个 promise ，然后把结果 resolve() 返回去，在调用的时候 .then() 得到结果。学问点： canvas 的 todataurl('image/png', 0.9) ; 把 canvas 画的转换为 base64,第一个参数表示的是的类型，其次个参数表示的是的清楚度。 规定一个最大尺寸，假片本身的

3、宽巍峨于这个尺寸，根据最大的一个边举行缩放，另一个按照的 比例 举行设置，然后设置给 canvas . miniimage.jsexport default async function minisize(imgdata, maxsize = 200*1024) / const maxsize = 200 * 1024; if(imgdata && imgdata.files && imgdata.files.size img.addeventlistener('load', function() /原始尺寸 le

4、t originwidth = this.width; let originheight = this.height; / 最大尺寸限制 let maxwidth = 400, maxheight = 400; / 目标尺寸 let targetwidth = originwidth, targetheight = originheight; / 尺寸超过400x400的限制 if (originwidth > maxwidth | originheight > maxheight) if (originwidth / originheight > maxwidth / ma

5、xheight) / 更宽，根据宽度限定尺寸 targetwidth = maxwidth; targetheight = math.round(maxwidth * (originheight / originwidth); else targetheight = maxheight; targetwidth = math.round(maxheight * (originwidth / originheight); canvas.width = targetwidth; canvas.height = targetheight; ctx.drawimage(img, 0, 0, targe

6、twidth, targetheight); let base64 = canvas.todataurl('image/png', 0.9); resolve(base64); , false); ) 调用：test.jsonchangeimg = async (files, type, index) => let previous = ps.imagepicker.files; if(type = "add") let result = minisize(filesfiles.length-1); /用法 .then() 调用获得结果 await result.then(res => previous.push(url: res); ); else if(type = "remove") previous.splice(index,1); awa