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

Question

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

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

这是一个将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()
}

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

FIDDLE