右键单击时更改图像路径 "save image as"

Question

当人们试图通过访问右键菜单并"将图像另存为"来下载图像时，我的页面上是否可以有一个没有水印的图像。让他们下载一张带有水印的图片？

Answer 1

因此，很明显，您可以检查mousedown事件处理程序中按下了哪个鼠标按钮，如果是正确的按钮，则更改图像的来源：

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

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

Answer 2

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

Answer 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"*/
}​