如何给浏览器“保存图像”按钮选项 [英] How to give browser "save image as" option to button

问题描述

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

I'm working on a canvas drawing project. I convert the canvas as an image, then I save that image as '.png'. I have to right click on the image and select the 'save image as' option. But I want to provide that option through a button. When I click the button it should be saved.

任何例子或想法都会受到赞赏。

Any example or idea would be appreciated.

这是一个将canvas转换为png的js函数。 / p>

This is a js function that converts canvas to png.

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

推荐答案

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

In modern browser you can use the download attribute

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

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

just trigger the function from a button, or insert the anchor in the page and style it as a button.

FIDDLE

这篇关于如何给浏览器“保存图像”按钮选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！