读取图像像素

Question

是否可以在画布A中读取图像的像素并在画布B上创建像素？我只想在图像像素为绿色的情况下在画布B上创建新像素。 例如，如果图像像素（120,45）是绿色的，则需要在画布B的（120,45）处创建一个绿色的像素。

- user1004912

---

你想使用哪种编程语言？PHP？ - JuSchz

这可能是一个不错的起点：http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/ - Aaron Newton

@julesanchez 我不知道你可以使用PHP与HTML画布进行交互。 - JJJ

@julesanchez 我正在尝试在HTML5中完成这个。 - user1004912

@AaronNewton 谢谢你提供的链接。我已经尝试过像素操作来反转图像。只是想知道是否可以在另一个画布中在相同的x，y坐标处创建特定颜色的像素。 - user1004912

Answer 1

你可以使用canvas ImageData来获取每个像素的颜色值。该函数：

context.getImageData(left, top, width, height);

返回一个ImageData对象，该对象包括以下属性：

• width（宽度）
• height（高度）
• data（CanvasPixelArray）

CanvasPixelArray 包含所有像素的RGBA值，从左上角开始向右下角移动。换句话说，它是一个包含4*width*height个条目的数组。

使用这个数组，您可以开始循环遍历每个像素（每个像素+ = 4个条目），并检查RGBA值。如果它们与您想要的特定值匹配，例如绿色，则将该值复制到画布B中，您可以通过修改新创建的ImageData对象来创建该画布B。

您可以使用以下代码创建一个新的空ImageData对象：

context.createImageData(cssWidth, cssHeight)

请注意，您需要了解特定的RGBA值来识别“绿色”或定义特定条件，例如，如果RGBA的G值为> = 150，则为“绿色”。

还要注意，您无法获取已污染来源外资源的ImageData。例如，如果您在画布上绘制了一个不安全的CORS图像，则将无法从该画布中检索ImageData，就像您也无法使用toDataURL一样。

- Niklas

---

谢谢。我已经尝试使用getImageData()和putImageData()来反转图像，并认为这可能是正确的方法。但我不确定像素是否会在画布B中以与图像相同的x，y坐标创建。 - user1004912

@user1004912 如果您指定相同的尺寸并将新创建的ImageData对象放置在与初始对象相同的位置，则它们的尺寸/位置将完全相同。 - Niklas