右键单击“另存为”更改图像路径答案

【问题标题】：Change image path when right click "save image as"右键单击“另存为”更改图像路径
【发布时间】：2012-03-09 23:28:25
【问题描述】：

当人们尝试通过访问右键菜单和“将图像另存为”来下载图像时，是否可以在我的页面上显示没有水印的图像。让他们下载带有水印的图片？

【问题讨论】：

您可以使用 HTML5 画布来支持这一点...因为您可以设置不同的源数据。

【解决方案1】：

显然，您可以检查在mousedown 事件处理程序中按下了哪个鼠标按钮，如果它是右键更改图像的来源：

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

这是一个演示：http://jsfiddle.net/s6A9m/

【讨论】：

【解决方案2】：

不，这是不可能的，因为您没有任何关于用户当前正在使用这些图像做什么的信息。但是，您可以将水印应用到图像的底部或顶部，然后在 html 中隐藏图像的一部分

【讨论】：

【解决方案3】：

据我所知，您必须打破常规的 UX（用户体验）才能做到这一点。

您可以禁用右键单击上下文菜单，然后创建您自己的（例如只为您要添加水印的图像），这样当用户右键单击图像时，他们可以选择下载图像但他们被定向到带水印的元素而不是无水印的元素。

这是搜索的第一个搜索结果：“jQuery 上下文菜单”

http://labs.abeautifulsite.net/archived/jquery-contextMenu/demo/

您还可以通过在图像上放置一个不允许click 事件到达图像的透明元素来取消用户右键单击图像的能力。然后为用户提供一个清晰标记的链接以下载图片（当然，您只需将用户引导至带水印的图片即可）。

这里是这个方法的一个演示：http://jsfiddle.net/xAjDp/

HTML --

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

CSS --

.container {
    position : relative;
    display  : inline-block;

    /*IE7&6 Compatibility*/
    *display : inline;
    zoom     : 1;
    _height  : 366px;
}
.container .overlay {
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    background : #000;
    opacity    : 0;
    filter     : alpha(opacity=0);
    zoom       : 1;/*give the element "hasLayout"*/
}

【讨论】：

我认为两者的结合会很好，当人们关闭 javascript 时会有额外的安全性......
@user1260349 您必须意识到任何确定的用户都可以“窃取”您的非水印图像。如果您将它们输出到浏览器，它就不受您的控制，任何知道 HTML 的人都可以查看页面的源代码以找到图像的 URL。
是的，我知道这一事实，但我可以排除的人越多越好... ofc 总是有截图 :s 但我并不担心，因为他们会只能以这种方式截取缩略图。我也会尝试不在我的 html 中直接设置 img 的路径，而是让它用 php 动态抓取它。
@joopmicroop 如果您通过 PHP 设置路径，那么它将被输出到浏览器（并且在源代码中可见），除非您使用 AJAX 请求来获取文件名/图像和以这种方式将它们添加到 DOM（高级用户仍然可以检查 DOM 以查找 url）。也许您可以设置一个 JS 数组/对象来存储所有来源，然后在页面加载时您可以更改所有图像的来源，这样它们就不会被硬编码到 HTML 中。如果这样做，请确保为图像提供有效的硬编码源，这样浏览器就不会尝试加载无用的资源。