Измените путь к изображению, когда щелкните правой кнопкой мыши «Сохранить изображение как»

Question

Возможно ли иметь изображение без водяного знака на моей странице, и когда люди пытаются загрузить изображение, открыв меню правой кнопки мыши и "сохранить изображение как". Чтобы позволить им загрузить изображение с нанесенным на него водяным знаком?

Answer 1

Насколько мне известно, вам придется сломать обычный UX (User eXperience), чтобы сделать это.

• Вы можете отключить контекстное меню, вызываемое правой кнопкой мыши, а затем создать свое собственное (скажем, только для изображений, которые вы хотите добавить водяной знак), чтобы, когда пользователь щелкает правой кнопкой мыши изображение, ему предоставлялась возможность загрузить изображение, но они направлены на элемент с водяным знаком вместо элемента без водяного знака.

Вот первый результат поиска: «контекстное меню 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"*/
}​

Answer 2

Таким образом, вы можете проверить, какая кнопка мыши была нажата в обработчике события mousedown, и если это была правая кнопка, измените источник изображения:

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

Вот демонстрационная версия: http://jsfiddle.net/s6A9m/

Answer 3

Нет, это невозможно, поскольку у вас нет никакой информации о том, что пользователь в настоящее время делает с этими изображениями.Вы можете, однако, применить свой водяной знак к нижней или верхней части изображения, а затем просто скрыть часть изображения в html