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

我正在做一个canvas绘图项目。 我将canvas转换为图像，然后将该图像保存为“.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() } 

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

小提琴

Answer 2

首先为它创建一个按钮
Download

然后在javascript中添加以下内容

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

我为你做了一个例子来看看吧！