サイト内にある画像の盗用防止に一定の効果がある画像のコピーガードですが、いくつかある方法をjQueryで簡単にできるので紹介したいと思います。  

1. 右クリックで表示されるメニューを禁止する

画像を右クリックするとメニューが表示されますが、その中には「画像をコピーする」や「別名で画像を保存する」など画像をコピーできる機能があります。右クリックを禁止することで防ぐ方法です。 【javascript】

$(function(){
  $("img").on('contextmenu',function(e){
    return false;
  });
});

 

2. 画像のドラッグを禁止する

画像を直接ドラッグ＆ドロップすることでもコピーができます。画像のドラッグ自体を禁止することで防ぐ方法です。 【javascript】

$(function(){
  $("img").on('mousedown mouseup',function(e){
    return false;
  });
});

  これらはjQueryで実装する方法ですが、CSSを使って透明のダミー画像を上から重ねることでも画像コピーガードができます。また使用する箇所が限定的であれば、下記のようにHTMLタグに直接記述することでも可能です。

<img src="../img.png" oncontextmenu="return false;">

  キャプチャをすると結局コピーされてしまうのですが、、一定の効果はあるのではないでしょうか。今回のサンプルはこちらからご確認いただけます。