根据主题色修改图片颜色的小技巧

背景

需要将下面这种Tab栏的选中底色跟随主题颜色（由于我太菜画不出这种形状tab来所以只能贴图🐶），因此我需要一个方法来帮我动态修改图片颜色

解决

实现原理：应该很好理解就不废话了
注：这个方案只适用于纯色图片，更多需求可自行探索😄

/**用于将一张纯色图片的颜色更改为指定的颜色
 * @param imageUrl 图片的URL
 * @param targetColor 目标颜色值
 * @param callback 回调函数 获取新生成的图片
 * @description  这个工具方法将输入一张图片的URL和目标颜色值，然后返回一个新的Base64编码的图片
 */
export const changeImageColor = (imageUrl, targetColor, callback) => {
    const image = new Image();
    image.crossOrigin = 'anonymous';

    image.onload = function () {
        const canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(image, 0, 0);

        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;

        // 解析目标颜色值
        const red = parseInt(targetColor.slice(1, 3), 16);
        const green = parseInt(targetColor.slice(3, 5), 16);
        const blue = parseInt(targetColor.slice(5, 7), 16);

        for (let i = 0; i < data.length; i += 4) {
            if (data[i + 3] > 0) { // 检查像素是否非透明
                data[i] = red;
                data[i + 1] = green;
                data[i + 2] = blue;
            }
        }

        ctx.putImageData(imageData, 0, 0);

        // 将Canvas上的图片转换为Base64编码
        const newImageBase64 = canvas.toDataURL('image/png');

        if (typeof callback === 'function') {
            callback(newImageBase64);
        }
    };

    image.src = imageUrl;
}