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

Question

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

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

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

Answer 1

要获取图像数据，请使用canvas上下文的getImageData（）方法，然后从数据属性中访问像素数据。数据属性中的每个像素都包含红色，绿色，蓝色和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。

希望有所帮助。