如何在JavaScript图像对象中访问/更改像素？

Question

我正在为网页显示绘制一幅图像到画布上。我有两份图像的拷贝，第一份是原始图像或基准图像，第二份是将应用各种图像处理算法的拷贝。

如何将基准图像的像素复制到拷贝中，以及在复制后如何访问拷贝中的像素以处理图像？

到目前为止，我看到的示例都涉及访问和操纵画布对象而不是图像数据。这是推荐的解决方案吗？将原始图像绘制到画布上，然后处理画布？

- Robinson

Answer 1

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

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];

您可以在此处找到有关使用画布处理图像数据的更多信息。

希望这能帮到您。

- DavidDomain

---

这是唯一的方法吗，David？我必须使用画布吗？ - Robinson

这是我能想到的最简单的方法了。你也可以使用FileReader API通过readAsArrayBuffer方法创建一个ArrayBuffer，该方法将读取Blob或File并生成固定长度的二进制数据缓冲区。但是那样的话，你需要构建自己的函数来从缓冲区中提取像素数据。canvas方法可以替你完成这个步骤。 - DavidDomain

我不想走那么远，所以第二个画布缓冲区就可以了。 - Robinson

我玩得很开心，试图使用它来给图像添加透明度。最终效果非常好：https://botched-deployments.com/posts/messing-with-images。基本上是通过循环遍历像素，并根据RGBA值进行每个像素的操作。 - undefined