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

Question

类似以下内容：

 <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: 
    }

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

Answer 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 Grey编写了一个效果良好的垫片：https://github.com/eligrey/FileSaver.js/