Php 右键单击“将图像另存为”时更改图像路径

Php 右键单击“将图像另存为”时更改图像路径,php,jquery,html,css,contextmenu,Php,Jquery,Html,Css,Contextmenu,当人们试图通过访问右键单击菜单下载图像并将图像另存为时,我的页面上是否可能有一个没有水印的图像。要让他们下载应用了水印的图像?不,这是不可能的,因为您没有任何关于用户当前如何处理这些图像的信息。但是,您可以将水印应用于图像的底部或顶部,然后将图像的一部分隐藏在html中。据我所知,要做到这一点,您必须打破正常的用户体验 您可以禁用右键单击上下文菜单,然后仅为要添加水印的图像创建自己的设置,这样,当用户右键单击图像时,他们可以选择下载图像,但会将其定向到带水印的元素而不是非带水印的元素。 以下是s

当人们试图通过访问右键单击菜单下载图像并将图像另存为时,我的页面上是否可能有一个没有水印的图像。要让他们下载应用了水印的图像?

不,这是不可能的,因为您没有任何关于用户当前如何处理这些图像的信息。但是,您可以将水印应用于图像的底部或顶部,然后将图像的一部分隐藏在html中。据我所知,要做到这一点,您必须打破正常的用户体验

您可以禁用右键单击上下文菜单,然后仅为要添加水印的图像创建自己的设置,这样,当用户右键单击图像时,他们可以选择下载图像,但会将其定向到带水印的元素而不是非带水印的元素。 以下是search:jQuery上下文菜单中的第一个搜索结果

您还可以通过在图像上放置一个不允许单击事件到达图像的透明元素来删除用户右键单击图像的功能。然后给用户一个清晰标记的链接来下载图像,当然,您只需将用户指向带水印的图像即可。 以下是此方法的演示:

HTML-

<div class="container">
    <div class="overlay"></div>
    <img src="[src]" />
</div>
<a href="[src]">Download Image</a>​

显然,您可以检查mousedown事件处理程序中按下的鼠标按钮,如果是右键,则更改图像的来源:

​$('img').on('mousedown', function (event) {
    if (event.which == 3) {
        this.src = this.src.replace('.jpg', '_watermark.jpg');
    }
});​​​​​​​​​

这里是一个演示:

您可能可以通过HTML5画布支持此功能。。。因为你可以设置不同的源数据。我认为这两种方法的结合会很好,在人们关闭javascript时有额外的安全性…@user1260349你必须意识到任何有决心的用户都可以窃取你的非水印图像。如果你将它们输出到浏览器,它将不受你的控制,任何了解HTML的人都可以查看页面的源代码,找到图像的URL。是的,我知道这一事实,但我可以排除的盗取者越多越好。。。ofc总是有截图,但我并不担心,因为他们只能用这种方式截图缩略图。我也会尝试不直接在html中设置img的路径,而是让它通过php动态获取。@joopmicroop如果您通过php设置路径,那么它将被输出到浏览器,并且在源代码中可见,除非您使用AJAX请求获取文件名/图像并将其添加到DOM中,否则高级用户仍然可以通过这种方式检查DOM以查找url。也许您可以设置一个JS数组/对象来存储所有源代码,然后在页面加载时您可以更改所有图像的源代码,这样它们就不会硬编码到HTML中。如果执行此操作,请确保为图像提供有效的硬编码源,以便浏览器不会尝试加载无用的资源。
​$('img').on('mousedown', function (event) {
    if (event.which == 3) {
        this.src = this.src.replace('.jpg', '_watermark.jpg');
    }
});​​​​​​​​​