html 5 canvas - 获取图像的颜色,然后用该颜色更改像素

Question

我不知道这是否可行,我从来没有真正使用过html canvas,但我知道

var imgPixels = canvasContext.getImageData(0, 0, canvas.width, canvas.height);

但是如何使用它来获取具有特定颜色的所有像素并将这些像素更改为白色？所以,假设我的像素为红色:

if(pixel==red){
    pixel = white;
}

这是我想要的简单版本,但不知道如何做到这一点......

任何想法？

Answer 1

做这样的事情(这是画布作弊表):

var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var pixelArray = imageData.data;
var length = pixelArray.length / 4; // 4 components - red, green, blue and alpha

for (var i = 0; i < length; i++) {
    var index = 4 * i;

    var r = pixelArray[index];
    var g = pixelArray[++index];
    var b = pixelArray[++index];
    var a = pixelArray[++index];

    if (r === 255 && g === 0 && b === 0 & a === 255) { // pixel is red
        pixelArray[--index] = 255; // blue is set to 100%
        pixelArray[--index] = 255; // green is set to 100%
        // resulting color is white
    }
}

context.putImageData(imageData, 0, 0);

这是一个现场演示:http://jsfiddle.net/36M6W/