Change image path when right click “save image as”

问题

Is it possible to have an image without watermark on my page and when people try to download the image by accessing the right click menu and "save image as". To let them download an image with the watermark applied to it?

回答1:

So apparently you can check which mouse button was pressed in a mousedown event handler and if it was the right button change the source of the image:

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

Here is a demo: http://jsfiddle.net/s6A9m/

回答2:

No, this isn't possible, as you haven't any information about what is user currently doing with these images. You can, however, apply your watermark to the bottom or to the top of the image and then just hide part of an image in your html

回答3:

To my knowledge, you're going to have to break the normal UX (User eXperience) to do this.

You could disable the right-click context menu and then create your own (say just for the images you want to watermark) so that when a user right-clicks an image, they are given the option to download the image but they are directed to the watermarked element instead of the non-watermarked element.

Here is the first search result from the search: "jQuery context menu"

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

You could also remove the users ability to right-click the image by placing a transparent element over the image that does not allow the click event to reach the image. Then give the user a clearly labeled link to download the image (but of-course you just direct the user to the watermarked image).

Here is a demo of this method: 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"*/
}

来源：https://stackoverflow.com/questions/9642345/change-image-path-when-right-click-save-image-as

标签

php

jquery

html

css

contextmenu