在 JavaScript 中更改默认图像扩展名

Question

我的网站中有一个页面，显示图像。当我右键单击图像并单击将图像另存为时，我得到默认名称。我想右键单击更改图像名称并保存。

例如：
在我的 HTML 代码中我有
image src="abc.jpeg"

当我右键单击时，我希望将此图像保存为 def.jpg。

有办法做到这一点吗？

Answer 1

据我所知，你不能用 JavaScript 做到这一点。这只能在服务器端处理。

如果您使用 PHP，一个简单的解决方案是使用 header()< /a>.

// It will be called downloaded.pdf
header('Content-Disposition: attachment; filename="downloaded.pdf"');

当然，您可以用变量替换 download.pdf 。

header('Content-Disposition: attachment; filename="' . $fileName .'"');

来自 PHP 文档：

如果您希望提示用户保存您发送的数据，
比如生成PDF文件，可以使用»Content-Disposition
header 提供推荐的文件名并强制浏览器
显示保存对话框。

Answer 2

好吧，有一种方法可以做到这一点..但我不确定它是否适用于大多数浏览器。
在 body 标记中添加 oncontextmenu="return false;" 属性。它将禁用上下文菜单（希望如此？！）！

如果您想要自定义上下文菜单，则只需使用少量 css 和脚本即可完成。为单击事件附加事件处理程序，并在发生左键或右键单击时执行操作。

Answer 3

不要这样做，并不是每个浏览器都支持它（在某些浏览器中也可以选择退出上下文菜单事件）。你为什么要这样做？

我猜您想链接到大版本的缩略图。因此，只需在图像标签周围放置一个链接 ()，每个人都会很高兴。当您使用描述性工具提示指示链接时，效果会更好。

---

编辑：

当页面中已包含图像时，您无法更改用户代理在单击[另存为]时提供的默认标题。一点，无一例外。

浏览器可能会使用下载路径中的文件名。您无法动态更改 src 属性（通过脚本），因为这会加载另一个文件。您可以做的是交付包含已在其所需文件名下的文件的页面，但要在服务器上完成。

因此选项 #2 正在开始（新）文件下载。在 Content-Disposition 标头中，您可以动态（在服务器上）为发送的内容建议任何文件名。要开始下载，只需将图像包装到链接中（您甚至可以更改该链接的 href 属性）。或者您可能想要构建一个自定义上下文菜单以将下载链接显示为[另存为]按钮（如何做到这一点将是另一个问题的问题）。

选项 #3 是在新选项卡/窗口中打开文件，对其应用 document.execCommand("SaveAs", [...]) 并再次关闭选项卡/窗口。不幸的是，这仅在 Internet Explorer 中受支持；请参阅 execCommand SaveAs 在 Firefox 中工作吗？ 了解这一点和建议。

Answer 4

您可以将其放入图像中

<img src=".." onClick="this.src='new URL'">

，也可以在单独的函数中执行此操作

<img src=".." onClick="change(this)">
//
<script>
function change(img) {
img.src = 'new src';
}
</script>