javascript - 读取图像像素

Question

是否可以在 Canvas A 中读取图像的像素并在 Canvas B 上创建像素？我只想在图像像素为绿色的地方在 Canvas B 上创建新像素。例如。如果图像的像素 (120,45) 是绿色，我需要在 Canvas B 中的 (120,45) 创建一个绿色像素

Answer 1

您可以使用 canvas ImageData获取每个像素的颜色值。函数:

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

返回 ImageData对象，它包含以下属性:

• 宽度
• 高度
• 数据(CanvasPixelArray)

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

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

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

context.createImageData(cssWidth, cssHeight)

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

另请注意，您无法获取来源之外的已污染资源的 ImageData。即，如果您在不支持 CORS 安全的 Canvas 上绘制图像，您将无法再从该 Canvas 中检索 ImageData，就像您无法使用 一样toDataURL 要么。