将画布元素下载为 png 的最简单方法是什么？答案

【问题标题】：What is the easiest way to download a canvas element as a png?将画布元素下载为 png 的最简单方法是什么？
【发布时间】：2014-06-03 19:03:17
【问题描述】：

类似于以下内容：

 <canvas id="canv" width="500" height="500"> </canvas>
    <input type="submit" value="Download Canvas" onclick="download();"/>


    function download () {
     var canvas = document.getElementById("canv");
     var dataURL = toDataURL(canvas);

    //Download code here: 

    }

启动图像下载所需的代码是什么？

【问题讨论】：

type=submit 通常表示上传到服务器--不是下载...您是要上传到服务器还是让客户端保存到本地驱动器？
下载到他们的本地驱动器。
您可以使用 FileSaver.js。请参阅stackoverflow.com/a/36987094/2183503 了解更多信息

标签： html image canvas download png

【解决方案1】：

与浏览器最兼容的方式是创建画布的客户端图像并将其显示在新的浏览器选项卡中。

然后用户可以“右键单击-另存为”图像并指定他们希望在本地驱动器上下载图像的位置。

var html="<p>Right-click on image below and Save-Picture-As</p>";

html+="<img src='"+canvas.toDataURL()+"' alt='from canvas'/>";

var tab=window.open();

tab.document.write(html);

w3c 引入了一种新的 saveAs 方法，可以将 blob 数据保存到本地驱动器。

但它并没有在浏览器中普遍实现。

Eli Gray 编写了一个运行良好的垫片：https://github.com/eligrey/FileSaver.js/

【讨论】：