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


Change default image extension in JavaScript

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

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

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

有办法做到这一点吗?

据我所知,使用JavaScript是无法做到这一点的。这只能在服务器端上处理。

如果您使用的是PHP,一个简单的解决方案是使用header()。

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

当然,你可以用一个变量来代替download.pdf。

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

来自PHP文档:

如果您希望提示用户保存您正在发送的数据,例如生成的PDF文件,您可以使用»内容处置标头,以提供推荐的文件名并强制浏览器显示保存对话框。

有一种方法可以做到这一点。。但我不确定它是否适用于大多数浏览器。在body标记中添加oncontextmenu="return false;"属性。它将禁用上下文菜单(希望是?!)!

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

不要这样做,并不是每个浏览器都支持它(在某些情况下也可以选择退出contextmenu事件)。你为什么要这么做?

我想你想链接到缩略图的大版本。所以只要在你的图片标签周围放一个链接(<a>),每个人都会很高兴。如果用描述性工具提示指示链接,效果会更好。


编辑:

如果页面中已包含图像,则无法更改用户代理在单击[另存为]时提供的默认标题。重点,没有解释。

浏览器可能会使用下载路径中的文件名。您不能动态地(通过脚本)更改src属性,因为那样会加载另一个文件。您可以做的是交付页面,其中的文件已经在其期望的文件名下,但要在服务器上完成。

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

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

您将其放入图像中

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

或者你可以在一个单独的功能中完成

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