使用JavaScript更改GIF颜色

Question

我正在建立一个网站，我需要一个用户能够选择一个图像（一个带有黑色标记的透明gif）并选择一种颜色。我把所有的GIF都用黑色透明背景。

如何将gif（仅黑色）的颜色更改为用户选择的颜色？我正在考虑使用帆布，但我不确定......

Answer 1

您可以使用画布。没有必要像许多建议那样迭代像素缓冲区，我建议尽可能避免这样做有两个原因：

• 如果图像是从其他来源加载的，则可能适用CORS限制
• 性能

涉及复合模式的方法更简单：

Live demo

/// load image here, then:

function render() {

    /// this composite mode clears the canvas as well
    ctx.globalCompositeOperation = 'copy';
    ctx.drawImage(img, 0, 0);

    /// this mode fills in whatever, in the image
    ctx.globalCompositeOperation = 'source-in';

    /// color to change GIF to:
    ctx.fillStyle = '#00c';

    /// fill color into non-alpha pixels
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

copy模式在这里工作，因为图像是我们想要绘制到画布的唯一内容。如果您还需要绘制其他详细信息，请使用source-over代替并使用clearRect()手动清除画布。

提示：您还可以在顶部绘制另一个图像而不是填充颜色。

原始GIF

更改为蓝色

ctx.fillStyle = '#00c';

更改为红色

ctx.fillStyle = '#c00';

等

Answer 2

假设您想要更改图像黑色部分的颜色（而不是透明部分），您必须使用画布来获取图像的黑色像素并绘制一个新图像，用颜色替换这些像素您的用户已选择。

如果您想要替换透明部分，只需使用CSS设置背景颜色即可。