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

解决方法:

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

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

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

>宽度
>身高
>数据(CanvasPixelArray)

CanvasPixelArray包含所有像素的RGBA值,从左上角开始向右下方开始.换句话说,它是一个包含4 *宽*高度条目数的数组.

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

您可以使用以下命令创建一个新的空ImageData对象：

context.createImageData(cssWidth, cssHeight)

请注意,您需要知道标识“绿色”的特定RGBA值或定义特定条件,即如果RGBA的G值>≥150,则它是“绿色”.

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