HTML 5画布 - 获取图像的颜色，然后更改具有该颜色的像素

Question

我不知道这是否可能，因为我从未真正使用过HTML画布，但我知道

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

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

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

这是我想要的简化版本，但不确定如何实现... 有人有什么想法吗？

- Lennart

---

你已经得到了答案，这里提供一个演示：http://jsfiddle.net/Dj82E/ - Rikonator

Answer 1

像这样做（这里有画布速查表）：

const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");

const { width, height } = canvas;

const gradient = context.createLinearGradient(0, 0, 0, height);
gradient.addColorStop(0.25, "#FF0000");
gradient.addColorStop(0.75, "#000000");

context.fillStyle = gradient;

context.fillRect(0, 0, width, height);

setTimeout(() => {
    const image = context.getImageData(0, 0, width, height);
    const { data } = image;
    const { length } = data;

    for (let i = 0; i < length; i += 4) { // red, green, blue, and alpha
        const r = data[i + 0];
        const g = data[i + 1];
        const b = data[i + 2];
        const a = data[i + 3];

        if (r === 255 && g === 0 && b === 0 && a === 255) { // pixel is red
            data[i + 1] = 255; // green is set to 100%
            data[i + 2] = 255; // blue is set to 100%
            // resulting color is white
        }
    }

    context.putImageData(image, 0, 0);
}, 5000);

<p>Wait for 5 seconds....</p>
<canvas width="120" height="120"></canvas>

希望这能帮到您。

- Aadit M Shah

---

谢谢你提供的 JSFiddle，但是我无法将其与图像一起使用，可能是一个新手错误，你能否帮忙看一下？http://jsfiddle.net/36M6W/1/ - Lennart

首先，您正在从imageshack加载图像。像这样加载的图像可能无法修改。这样做会违反同源策略。这就是为什么您不能在jsfiddle上操作单个像素。 - Aadit M Shah

接下来的条件 r === 255 && g === 0 && b === 0 & a === 255 仅检查颜色是否完全为 #FF0000。这种颜色可能根本不存在于您的图像中。相反，可能存在另一种红色色调。你想做的是检查一个数字范围。我尝试了以下条件，并且效果还不错：r / g > 2 && r / b > 2。 - Aadit M Shah

Answer 2

当你使用getImageData()函数时，你会得到一个带有data、width和height属性的对象。

你可以循环读取data中包含的像素数据。每四个数据为一组，依次表示红、绿、蓝和透明度。

因此，你可以查找红色像素（需要自行判断哪些像素是红色），并将红色、绿色和蓝色都设置为最大值，即白色。然后，你可以使用putImageData()函数来更新canvas的像素数据。

// You will need to do this with an image that doesn't violate Same Origin Policy.
var imgSrc = "image.png";
var image = new Image;

image.addEventListener("load", function() {

    var canvas = document.getElementsByTagName("canvas")[0];
    var ctx = canvas.getContext("2d");

    canvas.width = image.width;
    canvas.height = image.height;

    ctx.drawImage(image, 0, 0);

    var imageData = ctx.getImageData(0, 0, image.width, image.height);
    var pixels = imageData.data;
    var i;

    for (i = 0; i < pixels.length; i += 4) {
        // Is this pixel *red* ?
        if (pixels[i] > 100) {
            pixels[i] = 255;
            pixels[i + 1] = 255;
            pixels[i + 2] = 255;
        }
    }

    ctx.putImageData(pixels);

});

image.src = imgSrc;​

- alex

---

我找不到关于setImageData的文档？你是不是指的putImageData？ - Paul S.

@PaulS 是的，我的记忆出了点问题 :) - alex