如何将 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();
}

上述函数可以是一个可重复使用的函数，以帮助将 canvas 下载为文件。现在只需传递图像的 canvasid 和文件名。 :)

如何将 HTML canvas 导出为可下载的图像？

How do I export a HTML canvas to an image that can be downloaded?

html

javascript

export

download

html5-canvas