canvas之修改Base64图片中不透明部分的颜色

canvas之修改Base64图片中不透明部分的颜色

方法代码：

 /**
* 修改Base64图片中不透明部分的颜色
* @param {string} base64Image - Base64格式的图片数据
* @param {string} newColor - 要替换的新颜色(十六进制格式，如'#ff0000')
* @param {number} [threshold=0] - 透明度阈值(0-255)，低于此值视为透明
* @param {function} [callback] - 处理完成后的回调函数
* @returns {Promise<string>} 返回处理后的Base64图片
*/
        function changeBase64ImageColor(base64Image, newColor, threshold = 0, callback) {
            return new Promise((resolve) => {
                const img = new Image();
                img.onload = function () {
                    const canvas = document.createElement('canvas');
                    const ctx = canvas.getContext('2d');
                    canvas.width = img.width;
                    canvas.height = img.height;

                    // 绘制原始图像
                    ctx.drawImage(img, 0, 0);

                    // 获取像素数据
                    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                    const data = imageData.data;

                    // 将新颜色从十六进制转换为RGB
                    const hex = newColor.replace('#', '');
                    const r = parseInt(hex.substring(0, 2), 16);
                    const g = parseInt(hex.substring(2, 4), 16);
                    const b = parseInt(hex.substring(4, 6), 16);

                    // 修改不透明像素的颜色
                    for (let i = 0; i < data.length; i += 4) {
                        // 检查alpha通道(透明度)
                        if (data[i + 3] > threshold) {
                            data[i] = r;     // R
                            data[i + 1] = g; // G
                            data[i + 2] = b; // B
                            // 保持原始alpha值不变
                        }
                    }

                    // 将修改后的像素数据放回canvas
                    ctx.putImageData(imageData, 0, 0);

                    // 转换为Base64
                    const newBase64 = canvas.toDataURL('image/png');

                    if (callback) callback(newBase64);
                    resolve(newBase64);
                };

                img.src = base64Image;
            });
        }

调用方法：

changeBase64ImageColor(png1, hexColor).then(newImage => {
    console.log(newImage)
 });

　　

 

 

 

 

钻研不易，转载请注明出处。。。。。。