在HTML5画布元素上绘制的图像如何更改颜色？

Question

我有这张图片：

如何将其整个颜色更改为用户定义的RGB值？

换句话说，如果一张图片是灰度的，如何将其转换回彩色，且颜色可以是任何RGB值。

- TheOne

---

我认为不可能改变正在下载的图片的颜色，例如“src = http://i.stack.imgur.com/bWA6V.png”。 - Avinash T.

@AvinashT.，一旦使用drawImage()绘制到画布上，就可以更改画布以影响图像的颜色。 - TheOne

谢谢@Ramin提供的信息......你能提供任何相关链接吗？ - Avinash T.

@AvinashT，如果我能的话，我就不需要问了，但是http://www.html5rocks.com/en/tutorials/canvas/imagefilters/提供了实现我想要的东西的提示。 - TheOne

@Rikonator，请查看上面的评论。 - TheOne

@Ramin，你的想法很正确。将用户定义的RGB值与图像数据的RGB值进行按位OR运算应该可以解决问题。 - Rikonator

Answer 1

感谢 @Rikonator 的评论，解决方案如下：

function changeColor(img, r, g, b) {
    var c = document.createElement('canvas');
    c.width = img.width;
    c.height = img.height;
    var ctx = c.getContext('2d');
    ctx.drawImage(img, 0, 0);
    var imgData=ctx.getImageData(0, 0, c.width, c.height);
    for (var i=0;i<imgData.data.length;i+=4)
    {
        imgData.data[i]= r | imgData.data[i];
        imgData.data[i+1]= g | imgData.data[i+1];
        imgData.data[i+2]= b | imgData.data[i+2];
    }
    ctx.putImageData(imgData,0,0);
    return c;
},  

- TheOne