阅读图像像素

Question

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

Answer 1

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

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

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

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

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

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

您可以创建一个新的空的ImageData对象：

context.createImageData(cssWidth, cssHeight) 

请注意，您需要知道识别“绿色”的具体RGBA值或定义特定的条件，也就是说，如果RGBA的G值是>= 150那么它就是“绿色”。

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