owned mediaウェブ制作に役立つコンテンツを発信中!

jQueryでサイト内画像のコピーガードをする

最終更新日: Update!!
サイト内にある画像の盗用防止に一定の効果がある画像のコピーガードですが、いくつかある方法を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;">
  キャプチャをすると結局コピーされてしまうのですが、、一定の効果はあるのではないでしょうか。今回のサンプルはこちらからご確認いただけます。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

sponserd

    keyword search

    recent posts

    • Twitter
    • Github
    contact usscroll to top
      • Facebook
      • Twitter
      • Github
      • Instagram