JS前端改变图片颜色

有个功能需求，产品的一键换肤功能，需要在前端实现对图片ico颜色的更改，在之前我只想到三个方法：

1.该图片每个颜色下都制作一套图片组出来（太费时 太笨了 pass）

2.制作svg出来，只需更改svg源码里的color即可（不是美工 不擅长svg的编辑 svg图片后期要修改的话完全不会 pass）

3.全部的图ico改成白色，ico背景用div，去改变div的颜色就能实现类似”一键换肤”的效果（整体效果出来很丑 还是不行 pass）

 

OK，那就只能硬上了。经过度娘谷歌无数篇文章的翻阅，和CV的尝试，总结出该函数：

/**
 *
 * @param imgUrl 可传入图片URL 或者 Base64
 * @param toRGBArr 要换成的目标颜色RGB 数组格式[R,G,B]
 */
function myFun(imgUrl, toRGBArr) {
    let image = new Image();
    image.src = imgUrl;
    image.onload = function () {
        let newCanvas = document.createElement("canvas");
        let ctx = newCanvas.getContext("2d");

        newCanvas.width = image.width;
        newCanvas.height = image.height;

        ctx.drawImage(image, 0, 0, image.width, image.height);

        let imageData = ctx.getImageData(0, 0, newCanvas.width, newCanvas.height);
        //imageData 则为图片内每个像素点的RGB信息
        for (let p = 0; p < imageData.data.length; p += 4) {
            if (imageData.data[p + 3] !== 0) {
                //判断当前像素点的A值不为0 (RGBA A为透明度) 则替换成目标颜色
                imageData.data[p] = toRGBArr[0];
                imageData.data[p + 1] = toRGBArr[1];
                imageData.data[p + 2] = toRGBArr[2];
            }
        }
        ctx.putImageData(imageData, 0, 0);

        const dataUri = newCanvas.toDataURL("image/png");

        ctx.clearRect(0, 0, image.width, image.height);
        // console.log(dataUri);

    }
}

该函数仅对简单线条的图有效，复杂颜色和复杂线条组合的图无法适用，且线条必须干净，不能有过渡边 毛边。看下效果图：

OK 效果完美，又是被JS强大功能震撼的一天

---

参考链接：

https://blog.csdn.net/Highning0007/article/details/108666770