Question

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

如何将地面实况图像中的像素复制到副本中？如何在复制后处理图像时如何访问副本中的像素？

到目前为止，

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

Answer 1

要获取图像数据，请使用画布上下文的getImageData（）方法，然后从data属性访问像素数据。 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];

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

希望有所帮助。

如何访问/更改javascript图像对象中的像素？

1 个答案: