Question

我有一个PNG图像，有两种颜色（例如：红色和蓝色），可以使用javascript或html5更改颜色为红色为黄色，蓝色为绿色或其他颜色？

Answer 1

我为演示创建了一个小提琴： http://jsfiddle.net/tyduD/1/

实际上你可以改变每种颜色，但首先你需要获得三个主要颜色通道中每个像素的像素值（加上alpha通道，但这不是那么重要，但你需要考虑到循环数据通道）。所有三种颜色分量（RGB）都有单独的数据通道。

首先需要引用画布上下文，然后将data属性分配给将存储像素颜色值的像素数组：

var imageData = context.getImageData(0, 0, width, height);
var data = imageData.data;

使用双循环遍历颜色通道，在此处进行像素操作。

for (var y = 0; y < height; y++) {
    for (var x = 0; x < width; x++) {
        var index = (x + width * y) * 4;
        data[index+0] = data[index+2];
        data[index+1] = 255 - data[index+1];
        data[index+2] = 255 - data[index-1];

    }
}

这是使用画布和像素操作的绝佳资源： http://dev.opera.com/articles/view/html-5-canvas-the-basics/#pixelbasedmanipulation

Answer 2

是的，你可以这样做。

首先，您必须获取图像的imageData：

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var img = document.getElementById('myimg');
context.drawImage(img, 0, 0 );
var myData = context.getImageData(0, 0, img.width, img.height);

然后，您只需更改图片中每个myData[i]的{{1}}（红色）和myData[i+2]（蓝色）值。

然后使用i将imageData放回画布完成。

请参阅此参考：Pixel manipulation with canvas

用javascript改变图像部分的颜色

2 个答案: