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

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

最終更新日:2018.1.7 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

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram