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

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

然后用户可以＆＃34;右击 - 另存为＆＃34;图像并指定他们希望下载图像的本地驱动器的位置。

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/

将canvas元素作为png下载的最简单方法是什么？

1 个答案: