利用canvas压缩图片

前情提要

页面打印导出pdf文件的时候，图片大小会影响pdf文件大小。
为了减小pdf文件大小，需要将图片压缩一下。在只有图片地址的情况下，将图片压缩后显示，一开始用的browser-image-compression插件，这是js压缩，是个异步函数，速度有点慢，于是大佬提出用canvas压缩，一番百度之后，抽出了一个基础版。
不考虑代码优雅问题，只说能用就行。

1 代码

const imgUrl = "图片地址"
// 创建一个img标签
const img = new Image();
// 先给img加上onload方法，再设置src，防止设置onload的时候，已经加载好图片，onload就一直不触发
img.onload = () => {
   
    // 创建canvas  
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    // 设置canvas宽高，具体设置多少，后面解释
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    // 在canvas绘制前填充白色背景。
    // 遇到过白底的证件照压缩之后背景色变成了黑底，所以加一步填充背景色，不加也不影响压缩。
    ctx.fillStyle = "#fff";
    // 绘制图片
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    // canvas转成图片地址，在这一步进行文件大小压缩，第二个参数设置图片质量，不写默认0.92，后面解释为什么写0.2
    const base64 = canvas.toDataURL