如何给浏览器"保存图像为"选项按钮

Question

我正在做一个画布绘制项目。我将画布转换为图像，然后将该图像另存为“”。巴布亚新几内亚'。我必须右键单击图像并选择“将图像另存为”选项。但我想通过一个按钮提供这个选项。当我点击按钮时，它应该被保存。

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

这是一个js函数，用于将画布转换为png。

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

Answer 1

首先为它创建一个按钮

然后在javascript中添加以下内容

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

我已经为你做了一个例子看看这个！

Answer 2

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

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()
}

只需从按钮触发函数，或者在页面中插入锚并将其样式化为按钮。

小提琴