【问题标题】：Change GIF color with JavaScript使用 JavaScript 更改 GIF 颜色
【发布时间】：2014-02-28 03:53:05
【问题描述】：

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

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

【问题讨论】：

是gif动画还是简单图片？
看看这个帖子：stackoverflow.com/questions/12992681/…

标签： javascript html canvas html5-canvas gif

【解决方案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';

等等

【讨论】：

很棒且简单的解决方案！谢谢！

【解决方案2】：

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

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

【讨论】：