如何將 HTML canvas 導出到可以下載的圖像？

Question

我目前有一個 HTML canvas 插值數據點，我想采用下面顯示的 canvas 並允許用戶按下按鈕並將其下載到他們的計算機。

一般來說，我對 HTMl canvas 有非常基本的經驗，但我該怎么做呢？ 我假設我必須在 canvas 或網頁上編寫並將其與按鈕相關聯。 哪一個會更容易？

謝謝您的幫助。

Answer 1

function downloadCanvasContentFn(canvasId = "", fileName = "") {
    let id = "canvasDownloadLinkId";
    //get the link if already exisit in page
    let link = document.getElementById(id);

    //if not create one
    if (link == null) {
        //Create a link
        link = document.createElement('a');
        link.id = id;
    }

    //set file name
    link.download = fileName + '.png';
    //get canvas as data URL
    link.href = document.getElementById(canvasId).toDataURL()
    //click -- this will download
    link.click();
}

上面提到的 function 可以是一個可重復使用的 function 以幫助將 canvas 下載為文件。 現在只需傳遞圖像的 canvasid 和文件名。 :)