html 5 canvas - 获取图像的颜色，然后用该颜色更改像素 [英] html 5 canvas - get color of an image and then change the pixels with that color

问题描述

我不知道这是否可能，我从来没有真正使用html画布，但我知道

I don't know if this is possible, I've never really used html canvas, but I am aware of

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

但是如何使用它来获取某个颜色的所有像素并更改这些像素到白色？
所以我们假设我有一个红色的像素：

but how do I use this to get for example all the pixels with a certain color and change these pixels to white? So let's say I have a pixel colored red:

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

这是我想要的简单版本，但不知道如何做...

that's the simple version of what I would like but not sure how to do that...

任何人的想法？

推荐答案

这个（这里是画布备忘单）：

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/

Here'a a live demo: http://jsfiddle.net/36M6W/

这篇关于html 5 canvas - 获取图像的颜色，然后用该颜色更改像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！