我如何访问/改变像素在一个javascript图像对象

Question

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

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

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

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

你可以在这里找到更多关于如何使用画布处理图像数据的信息。

希望对你有帮助。