如何为按钮提供浏览器 "save image as" 选项

Question

我正在做一个 canvas 绘图项目。我将 canvas 转换为图像，然后将该图像保存为“.png”。我必须右键单击图像和 select 'save image as' 选项。但我想通过一个按钮提供该选项。当我单击按钮时，它应该被保存。

任何例子或想法将不胜感激。

这是一个将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!

如何为按钮提供浏览器 "save image as" 选项

How to give browser "save image as" option to button

javascript

jquery

fabricjs