hiroeleganceのエレガンスとは呼べない日常

WEB屋(コーダー)hiroelegance(ヒロエレガンス)のブログhiroeleganceのエレガンスとは呼べない日常略して「エレ日」です。YouTubeでゲーム実況してます。毎週火曜0時にラジオも配信しています。

【PC・スマホ】サイト上の画像の保存を禁止したい

      2016/12/16

本日は某所まで派遣登録へ行ってまいりました。

さて、表題の件ですが
お客様よりサイトの画像保存をさせたくないと言われまして、
作業しました。
キャプチャされたり
WebDeveloperツールで見たりしたら回避されてしまうのですが。。。
やるだけのことはやりました。

body {
-webkit-touch-callout:none; // リンク長押しのポップアップ(※1)を無効化
-webkit-user-select:none; // テキスト長押しの選択ボックス(※2)を無効化
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function(){
var timer;
$("img").on("touchstart",function(){
timer = setTimeout(function(){
alert("画像は保存できません")
},500)
return false;
})
$("img").on("touchend",function(){
clearTimeout(timer);
return false;
})
})
</script>
<body oncontextmenu="alert('画像の保存は禁止です。');return false">

スマホ用の記述とbodyタグのalertの記述がPCで右クリックを禁止する記述です。

【参考サイト】

image

こんな感じです。

iPhoneの実機が無いのでチェックできないのが痛いです。
PCとAndroidの標準ブラウザ、Chrome、FireFoxで動作確認済みです。
iPhoneだと画像保存できてしまっていたのですが以下の方法で解決しました。

【最終的に参考にさせていただいた記事】
iOS8でwebkit-touch-calloutが効かない。その対処法

img{pointer-events: none;}

  広告

 - お仕事, 働きマン