如何让浏览器“保存图像为”选项按钮

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

本文关键字：保存图像为 选项 按钮 图像 保存 浏览器      更新时间：2023-09-26

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

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

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

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

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

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

直接从按钮触发函数，或者在页面中插入锚点并将其样式设置为按钮。

小提琴

首先为它创建一个按钮
<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;
});

我给你做了一个榜样看看这个!

相关文章：