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;">キャプチャをすると結局コピーされてしまうのですが、、一定の効果はあるのではないでしょうか。今回のサンプルはこちらからご確認いただけます。
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories