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

时间:2013-01-05 18:52:23

标签: javascript html5 html5-canvas grayscale

我在这里有这张图片:enter image description here

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

换句话说,如果给出灰度图像,我该如何将其切换回颜色,颜色为任何rgb值。

1 个答案:

答案 0 :(得分:4)

感谢@ 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;
},