首页 文章

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

提问于
浏览 次
0

到目前为止，我有一个按钮，当单击时，使用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事件捕获此功能需要做什么？我坚持，任何建议非常感谢 .

javascript canvas onclick listener

1 回答

  • 1

    如果你在谈论你需要使用 .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) ;

    您的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);

    Or

    您可能只想将图像绘制到离屏画布，在那里做任何你想做的事情，然后将其绘制回用户可以看到的画布 . 既然你说你是JS的新手，那就是你创建画布的方法：

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

    如果您不想显示此画布，则只需正常使用它，当您完成操作图像时，只需在主画布上绘制它即可 .

    回复于

相关问题