Javascript 如何将HTML画布导出到可以下载的图像？

我目前有一个HTML画布，可以插入数据点，我想把下面显示的画布，允许用户按下按钮并下载到他们的计算机上

一般来说，我对HTMl画布有非常基本的经验，但我该如何做呢？我假设我必须写下，并将其与画布或网页上的按钮相关联。哪一个比较容易

谢谢你的帮助

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和文件名。：）

我会创建一个按钮来调用此函数吗？您可以创建一个按钮，也可以根据用户行为调用此按钮。我的按钮编码如下<代码>下载条件的图像。加载页面时，我可以下载空白图像，但在等待画布加载时，我无法下载任何图像。无需担心。我发现了问题所在。非常感谢你的帮助