读取图像像素

Question

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

Answer 1

您可以使用canvas ImageData获取每个像素的颜色值。功能：

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

返回一个ImageData对象，该对象由以下属性组成：

• 宽度
• 高度
• 数据（CanvasPixelArray）

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

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

您可以使用：

创建一个新的空ImageData对象

context.createImageData(cssWidth, cssHeight)

请注意，您需要知道标识“绿色”的特定RGBA值或定义特定条件，即如果RGBA的G值为>= 150则为“绿色”。

另请注意，您无法获得已被污染的ImageData资源。即，如果您将图像绘制到非CORS安全的画布上，您将无法再从该画布中检索ImageData，就像您不能使用toDataURL一样