如何实现canvas上的动态图片压缩功能？

本文共计268个文字，预计阅读时间需要2分钟。

使用canvas压缩图片并转换为base64格式，代码如下：

javascriptfunction getBase64(url, callback, outputFormat) { // 创建img实例 var img=new Image(); // 设置图片src属性 img.src=url; // 图片加载完成后的回调函数 img.onload=function() { // 创建canvas元素 var canvas=document.createElement('canvas'); // 设置canvas的宽高 canvas.width=img.width; canvas.height=img.height; // 将图片绘制到canvas上 var ctx=canvas.getContext('2d'); ctx.drawImage(img, 0, 0); // 将canvas内容转换为base64格式 var dataURL=canvas.toDataURL(outputFormat); // 调用回调函数并传入base64字符串 callback(dataURL); };}

// base 64 压缩处理图片大小 getBase64(url, callback, outputFormat) { //通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 省去了 append()，也就避免了文档冗余和污染 let canvas = document.createElement('CANVAS'); let ctx = canvas.getContext('2d'); let imgs = new Image; imgs.crossOrigin = 'Anonymous'; //移动端不支持，需要注掉 imgs.onload = function() { let width = imgs.width; let height = imgs.height; // 按比例压缩0.8倍 let rate = (width < height ? width / height : height / width) / 0.63; canvas.width = width * rate; canvas.height = height * rate; ctx.drawImage(imgs, 0, 0, width, height, 0, 0, width * rate, height * rate); let dataURL = canvas.toDataURL(outputFormat || 'image/png', .8); callback.call(this, dataURL); canvas = null; }; imgs.src = url; },