javascript html 5 canvas - 获取图像的颜色，然后使用该颜色更改像素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12992681/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html 5 canvas - get color of an image and then change the pixels with that color
提问by Lennart
I don't know if this is possible, I've never really used html canvas, but I am aware of
我不知道这是否可行，我从未真正使用过 html canvas，但我知道
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...
这是我想要的简单版本，但不知道该怎么做......
anyone any ideas?
有人有什么想法吗？
采纳答案by Aadit M Shah
Do something like this (here's the canvas cheat sheet):
做这样的事情（这是画布备忘单）：
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>Hope that helps.
希望有帮助。
回答by alex
When you get the getImageData(), you have an object with data, widthand height.
当您获得 时getImageData()，您就有了一个带有data,width和的对象height。
You can loop over data, which contains the pixel data. It's available in chunks of 4, which are red, green, blue and alpha respectively.
您可以遍历data，其中包含像素数据。它以 4 块为一组提供，分别是红色、绿色、蓝色和 alpha。
Therefore, your code could look for redpixels (you have to decide what makes a red pixel) and set the red, green and blue all on (to change it to white). You can then use putImageData()to replace the canvaswith the updated pixel 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;?
