我如何在一个函数中使用画布图像，该函数首先进行处理，然后将新处理的图像输出给用户

Question

到目前为止，我有一个按钮，当单击该按钮时，会使用toDataURL（）方法在弹出窗口中输出画布图像，从而将图像另存为.png。 我还有一个按钮，单击该按钮将获取用户原始生成的画布图像，并将其显示在第二个画布上。 这两个方面都是在我的努力下实现的：拍摄原始画布图像，并将该图像用于操纵图像并递归调用图像的功能，然后将操纵后的图像输出给用户。 我对js还是陌生的，但是我对OO语言很了解-如果可以使用Java，我可以这样做：

public CanvasImage manipulator(userImage){
    do this to image;
    do this to image;
    return manipulatedImage; //this needs to be a save-able image (toDataURL i think)
}

我需要做什么才能使用javaScript通过onClick事件捕获此功能？ 即时贴，任何建议，不胜感激。

Answer 1

如果您要讨论对图像进行逐像素操作，则需要使用.getImageData(x, y, width, height) ，这将为您和包含.data字段的对象提供一个.data字段，该字段是每个像素的RGBA的数组。图像，因此.data[0]是第一个像素的R通道， .data[1]是G通道， .data[2]是B通道， .data[3] Alpha通道，然后.data[4]是第二个像素的R通道。

全部在0-255范围内，而不是0-1。

您可以设置这些颜色值，也许您希望第一个像素为蓝色，然后执行以下操作：

var img = Ctx.getImageData(0, 0, Canvas.width, Canvas.height);
img.data[0] = 0; // R
img.data[1] = 0; // G
img.data[2] = 255; // B
img.data[3] = 255; // A

要绘制修改后的图像数据，只需使用Ctx.putImageData(img, x, y) ;

您的onclick事件如下所示：

button.Canvas = Canvas;
button.Ctx = CanvasContext;
button.addEventListener("click", function()
{
    var img = this.Ctx.getImageData(0, 0, this.Canvas.width, this.Canvas.height);
    // Do something to the image data here
    this.Ctx.putImageData(img, 0, 0);
}, false);

要么

您可能只想将图像绘制到屏幕外的画布上，在该处执行任何操作，然后将其重新绘制到用户可以看到的画布上。 因为您说过您是JS的新手，所以这是创建画布的方法：

var newCanvas = document.createElement("canvas");
var newCtx = Canvas.getContext("2d");

如果您不想这样做，则不会显示该画布，因此请正常使用它，完成图像处理后，只需将其绘制在主画布上即可。