读取图像像素

Question

是否可以在画布A中读取图像的像素并在画布B上创建像素？我想在Canvas B上创建新像素,只有图像的像素为绿色.例如.如果图像的像素(120,45)为绿色,我需要在(120,45)画布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.