javascript - 使用javascript更改图像部分的颜色

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]（红色）和myData[i+2]（蓝色）的值i。

最后，您使用 .将 imageData 放回画布中 context.putImageData。

请参阅此参考：使用画布进行像素操作