如何为图像创建另存为按钮

Posted 2023-05-07

【中文标题】如何为图像创建另存为按钮

【英文标题】：How to Create a Save as button for an image

【发布时间】：2015-03-07 14:31:48

【问题描述】：

我正在为 Chrome 开发屏幕截图扩展程序，并且想知道如何在 html/javascript 中实现“另存为”按钮。目前用户只能右键单击“另存为”。我是 Javascript 的新手，并没有完全找到如何在线进行操作的方法。有任何想法吗？谢谢！

【问题讨论】：

请发布您到目前为止所尝试的内容。

【参考方案1】：

你可以使用HTML5下载属性，是你要找的吗？

<img src="http://blog.grio.com/wp-content/uploads/2012/09/***.png" >
<br />
<a href="http://blog.grio.com/wp-content/uploads/2012/09/***.png" download>Save !</a>

【参考方案2】：

您可以使用<a href="" download="yourFileName">Save as …</a> 创建下载链接。 download attribute 将导致资源被下载而不是在浏览器中查看。

然后，如果您希望链接实际引用资源，请使用yourAnchorNode.href = yourImageNode.src; 之类的内容，或者如果您使用<canvas> 元素来显示图片（很遗憾，您没有在原始问题中指定它) 使用toDataURL 或toBlob:

yourAnchorNode.href = yourCanvasNode.toDataURL();

或

yourCanvasNode.toBlob((blob) => yourAnchorNode.href = URL.createObjectURL(blob));

注意toBlob是一个异步操作。