如何將 canvas 保存為圖像而不是直接下載？

Question

我有一個 p5 游戲，我想將 canvas 保存為p5.Image ，以便稍后在 canvas 上顯示它。 但是我只找到了直接下載 canvas 圖像的saveCanvas() function。 有沒有辦法將其保存為圖像以備后用？

Answer 1

AFAIK p5.js 庫沒有提供這樣做的方法。 但是，您可以通過以下代碼將其轉換為數據 url：

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

然后，您可以將其用作常規圖像源，例如，您可以將當前頁面重定向到圖像：

window.location.href = dataURL;