读取图像像素

Read image pixels

本文关键字：像素 图像 读取      更新时间：2023-09-26

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

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

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

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

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

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

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

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

context.createImageData(cssWidth, cssHeight)

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

还要注意的是，您无法获得来源之外已被污染资源的ImageData。也就是说，如果你在画布上绘制了一个不安全的CORS图像，你将无法再从画布中检索ImageData，就像你不能使用toDataURL一样。

相关文章：