javascript - 如何将画布保存为图像而不是直接下载？

Question

我有一个 p5 游戏，我想将画布另存为 a p5.Image，以便稍后在画布上显示它。但是我只找到了saveCanvas()直接下载画布图像的功能。有没有办法将其保存为图像以备后用？

标签： javascriptimagecanvassave

Answer 1

AFAIK p5.js 库没有提供这样做的方法。但是，您可以通过以下代码将其转换为数据 url：

const dataURL = document.querySelector("#myCanvas")
                        .toDataURL()
                        .replace("image/png", "image/octet-stream");

然后，您可以将其用作常规图像源，例如，您可以将当前页面重定向到图像：

window.location.href = dataURL;