JS 如何将 Canvas 画布保存为 png 图像？

在JavaScript中，我们可以通过以下步骤将Canvas画布保存为PNG图像：

1. 获取Canvas元素的引用。
2. 使用toDataURL方法将Canvas内容转换为数据URL，指定PNG格式作为参数。
3. 创建一个<a>元素并将其href属性设置为上一步得到的数据URL，然后设置下载属性（download）以提供保存时使用的默认文件名。
4. 触发这个<a>元素的点击事件来启动下载。

下面是一个具体的实现例子：

javascript
// 假设我们有一个id为'myCanvas'的<canvas>元素
const canvas = document.getElementById('myCanvas');

// 将canvas转换为数据URL，'image/png'指定了我们需要PNG格式
const imageURL = canvas.toDataURL('image/png');

// 创建一个a元素用于触发下载
const downloadLink = document.createElement('a');

// 设置下载文件的名称，例如 'my-canvas-image.png'
downloadLink.download = 'my-canvas-image.png';

// 将转换得到的图片URL设为a标签的href属性
downloadLink.href = imageURL;

// 隐藏该元素
downloadLink.style.display = 'none';

// 将该链接元素添加到DOM中
document.body.appendChild(downloadLink);

// 触发a标签的点击事件
downloadLink.click();

// 完成后，从DOM中移除该元素
document.body.removeChild(downloadLink);

在这个例子中，一个隐藏的<a>元素被创建并添加到了文档中。我们设置了它的href属性为Canvas的数据URL，并指定了下载时的文件名。接着，通过程序触发了这个链接的click事件，这会导致浏览器开始下载这个PNG图像。

请注意，这种方法在一些情况下可能会受到同源策略的限制。如果Canvas画布上绘制了跨域的图像资源，那么在没有适当的CORS标头的情况下，toDataURL方法可能会抛出安全错误。

FileSaver.js应该能够帮助您。

shell
var canvas = document.getElementById("my-canvas");
// draw to canvas...
canvas.toBlob(function(blob) {
    saveAs(blob, "pretty image.png");
});

我使用此解决方案来设置文件名：

HTML：

shell
<a href="#" id="downloader" onclick="download()" download="image.png">Download!</a>
<canvas id="canvas"></canvas>

JavaScript：

shell
function download(){
    document.getElementById("downloader").download = "image.png";
    document.getElementById("downloader").href = document.getElementById("canvas").toDataURL("image/png").replace(/^data:image\/[^;]/, 'data:application/octet-stream');
}

我遇到了这个问题，这是最好的解决方案，无需任何外部或额外的脚本库：在 Javascript 标签或文件中创建此函数：我们假设画布是您的画布：

shell
function download(){
        var download = document.getElementById("download");
        var image = document.getElementById("canvas").toDataURL("image/png")
                    .replace("image/png", "image/octet-stream");
        download.setAttribute("href", image);

    }

在 HTML 的正文部分中指定按钮：

shell
<a id="download" download="image.png"><button type="button" onClick="download()">Download</button></a>

这是有效的，下载链接看起来像一个按钮。在 Firefox 和 Chrome 中测试。