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

Question

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

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

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

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

Answer 1

在现代浏览器中,您可以使用download属性

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

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

小提琴

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

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