Question

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

Answer 1

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

Answer 2

据我所知，你将不得不打破正常的用户体验（用户体验）来做到这一点。

您可以禁用右键单击上下文菜单，然后创建自己的菜单（例如，仅针对要添加水印的图像），以便当用户右键单击图像时，可以选择下载图像，但是指向水印元素而不是非水印元素。

以下是搜索的第一个搜索结果：“jQuery context menu”

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

Answer 3

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

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

以下是演示：http://jsfiddle.net/s6A9m/

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

3 个答案: