共计 1086 个字符，预计需要花费 3 分钟才能阅读完成。
在开发中遇到一个设置通明色的需要，大略形容就是一张图，而后再给一个色彩，把这个图片上所有这个色彩的像素点设置为通明色，如下图
实现思路就是将图片画到 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’)
正文完
