canvas 2 image的使用小心得

在开发中遇到一个设置透明色的需求,大概描述就是一张图,然后再给一个颜色,把这个图片上所有这个颜色的像素点设置为透明色,如下图
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 = https://www.it610.com/article/src; img.onload = () => { const w = img.width; const h = img.height; context.drawImage(img, 0, 0); const imgData = https://www.it610.com/article/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') }

【canvas 2 image的使用小心得】在此功能实现过程中发现几个问题:
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')

    推荐阅读