关于canvas:canvas-2-image的使用小心得

在开发中遇到一个设置通明色的需要，大略形容就是一张图，而后再给一个色彩，把这个图片上所有这个色彩的像素点设置为通明色，如下图

实现思路就是将图片画到canvas上，而后遍历图片像素信息，将指定的rgb的alpha设置为0，即设置为全透明。

  const canvas = document.createElement('canvas');  const context = canvas.getContext('2d');  const img = new Image();  img.crossOrigin = 'Anonymous';  img.src = src;  img.onload = () => {     const w = img.width;    const h = img.height;      context.drawImage(img, 0, 0);    const imgData = context.getImageData(0, 0, w, h);    const pixcount = w * h;    for (let i = 0; i < pixcount * 4; i += 4) {      const r = imgData.data[i];      const g = imgData.data[i + 1];      const b = imgData.data[i + 2];      if (        Math.abs(r - color.r) <= dis &&        Math.abs(g - color.g) <= dis &&        Math.abs(b - color.b) <= dis      ) {        imgData.data[i + 3] = 0;      }    }    // 转成base64    canvas.toDataURL('image/webp')}  

在此性能实现过程中发现几个问题：
1、canvas.toDataURL(type, encoderOptions)
图片格式type默认为image/png，
encoderOptions 图片品质默认0.92 然而此参数在type为image/png时是不失效的，只在
image/jpeg和image/webp格局下失效
2、在应用此形式的过程中发现，原始图片jpeg只有1M,设置通明色后图片格式为png时图片体积增 大到10M，
为了解决此问题，做了以下尝试：
缩放canvas，导出仍旧是原canvas大小，图片还是10M，此计划不行♂️
设置为jpeg格局，会失落通明像素，通明像素变成了彩色，过后的我太蠢了jpeg怎么会有通明像素呢
设置为image/webp格局，图片体积900K, 完满，然而请留神此type在Safari上是不反对，在safari上canvas.toDataURL('image/webp')会默认变成canvas.toDataURL('image/png')