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

Question

我正在为 Chrome 开发一个屏幕截图扩展，想知道如何在 Html/Javascript 中实现 'Save as' 按钮。目前只有用户右击 'Save as'。我是 Javascript 的新手，并没有完全找到在线操作的方法。有任何想法吗？谢谢！

Answer 1

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

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

Answer 2

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

然后，如果您希望 link 实际引用资源，请使用类似 yourAnchorNode.href = yourImageNode.src; 的内容，或者如果您使用 <canvas> 元素来显示图片（您没有不幸的是，不要在你原来的问题中指定它）使用 toDataURL or toBlob:

yourAnchorNode.href = yourCanvasNode.toDataURL();

或

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

注意toBlob是一个异步操作。

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

How to Create a Save as button for an image

html

javascript

save-as