如何在 javascript 图像对象中 access/change 像素？

Question

我正在将图像绘制到 canvas 以在网页上显示。我有两张图片。第一个是原始的或真实的，第二个是将应用各种图像处理算法的副本。

如何将真实图像中的像素复制到副本，以及如何在复制后访问副本中的像素来处理图像？

Examples I've seen 到目前为止都涉及访问和操作 canvas 对象而不是图像数据。这是推荐的解决方案吗？将原图绘制成canvas然后处理canvas?

Answer 1

要获取图像数据，请使用 canvas 上下文的 getImageData() 方法，然后从数据属性访问像素数据。数据属性中的每个像素都包含红色、绿色、蓝色和 alpha 通道。因此，如果您确实将图像绘制到 canvas 上，那么您可以执行

var imageData = context.getImageData(imageX, imageY, imageWidth, imageHeight);
var data = imageData.data;

然后你可以像这样从x和y坐标中挑选出特定的像素数据

// pick out pixel data from x, y coordinate
var x = 20;
var y = 20;
var red = data[((imageWidth * y) + x) * 4];
var green = data[((imageWidth * y) + x) * 4 + 1];
var blue = data[((imageWidth * y) + x) * 4 + 2];
var alpha = data[((imageWidth * y) + x) * 4 + 3];

您可以找到有关如何使用图像数据的更多信息 canvas 右 here。

希望对您有所帮助。

如何在 javascript 图像对象中 access/change 像素？

How do I access/change pixels in a javascript image object?

javascript

image-processing