画像を右クリックしたときの画像のパスを変更する

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

ブラウザのキャッシュから画像を移動するだけで保存できます。 既にページを表示するだけで、ウェブページのすべての画像をダウンロードしています。 ウォーターマークを取得して、すべての画像にウォーターマークを作成するサーバーサイドスクリプトを作成する唯一の方法があります。 ここには解決策を提供する記事があります：http://www.sitepoint.com/watermark-images-php/

Answer 4

私の知る限り、これを行うには通常のUX（ユーザー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"*/ 
}​