如何在函数中使用画布图像，该函数首先操作然后将新操作的图像输出回用户

How can I use a canvas image in a function that, first manipulates then outputs the newly manipulated image back to user

本文关键字：图像 操作 函数 新操作 然后 输出 用户 布图像      更新时间：2023-09-26

到目前为止，我有一个按钮，单击该按钮时，可以使用toDataURL((方法在弹出窗口中输出画布图像，从而允许将图像另存为.png。 我还有一个按钮，单击该按钮时将获取原始用户生成的画布图像并将其显示在第二个画布上。 这两者都是在我的努力中实现的：获取原始画布图像并在操作图像并递归调用图像的函数中使用该图像，将处理后的图像输出回用户。我是js的新手，但我有OO lang的知识 - 如果我可以使用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 事件捕获此功能？我卡住了，任何建议都非常感谢。

如果您正在谈论对需要使用的图像进行每像素操作 .getImageData(x, y, width, height) ，这为您提供了包含.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) ;

您的点击事件如下所示：

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");

如果您不想，此画布将不会显示，因此只需正常使用它，当您完成图像操作后，只需将其绘制在主画布上即可。

相关文章：