Question

我正在进行画布绘图项目。我将画布转换为图像，然后将该图像保存为＆＃39; .png＆＃39;。我必须右键单击图像，然后选择“保存图像为＆＃39;选项。但我想通过按钮提供该选项。当我点击按钮时，它应该被保存。

任何例子或想法都会受到赞赏。

这是一个将canvas转换为png的js函数。

 function save2()
 {
   window.open(canvas.toDataURL('image/png'));
   var gh=(canvas.toDataURL('png'));
   alert("converted");
 }

Answer 1

在现代浏览器中，您可以使用下载属性

function save2() {
    window.open(canvas.toDataURL('image/png'));
    var gh = canvas.toDataURL('png');

    var a  = document.createElement('a');
    a.href = gh;
    a.download = 'image.png';

    a.click()
}

只需从按钮触发该功能，或在页面中插入锚点并将其设置为按钮。

FIDDLE

Answer 2

首先为它创建一个按钮
<a href="#" class="button" id="btn-download" download="my-file-name.png">Download</a>

然后在javascript中添加以下内容

var button = document.getElementById('btn-download');
button.addEventListener('click', function (e) {
    var dataURL = canvas.toDataURL('image/png');
    button.href = dataURL;
});

我为你做了一个例子 Check this out!

如何给浏览器＆＃34;将图像保存为＆＃34;按钮选项

2 个答案: