时间戳

首页 > 解决方案 > 如何将 HTML 画布导出为可下载的图像？

javascript - 如何将 HTML 画布导出为可下载的图像？

问题描述

我目前有一个插入数据点的 HTML 画布，我想采用下面显示的画布并允许用户按下按钮并将其下载到他们的计算机上。在此处输入图像描述

一般来说，我对 HTML 画布有非常基本的经验，但我该怎么做呢？我假设我必须编写并将其与画布或网页上的按钮相关联。哪一个会更容易？

感谢您的帮助。

标签： javascripthtmldownloadhtml5-canvasexport

解决方案

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

上面提到的函数可以是一个可重用的函数，以帮助将画布下载为文件。现在只需传递图像的 canvasid 和文件名。:)

推荐阅读