Сразу стоит сказать, что не существует таких средств, которые гарантированно не позволили бы сохранить изображение с сайта на компьютер. Другое дело, что процесс сохранения можно значительно усложнить, что многим злоумышленникам будет просто лень возиться с вашим сайтом и будет проще найти снимок где-нибудь в другом месте. Пример такой "возни": фото открыто у Вас на странице, однако защита сайта не дает Вам его сохранить. Нажатие кнопочки PrintScreen на клавиатуре - и изображение всего, что есть у вас на мониторе уже скопировано в буфер. Останеться только вставить его в графический редактор и вырезать нужную область.
Blocking the Default Right-Click Menu
Добавляем перед закрывающимся </body> скрипт:
<script type="text/javascript"> document.oncontextmenu = function(e) { e = e || window.event; if (/^img$/i.test((e.target || e.srcElement).nodeName)) return false; }; </script>
Tricking the Downloaders
Вместо скачиваемого фото подставляем прозрачную гифку:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { var pixelSource = 'http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif'; var useOnAllImages = true; // Preload the pixel var preload = new Image(); preload.src = pixelSource; $('img').live('mouseenter touchstart', function(e) { // Only execute if this is not an overlay or skipped var img = $(this); if (img.hasClass('protectionOverlay')) return; if (!useOnAllImages && !img.hasClass('protectMe')) return; // Get the real image's position, add an overlay var pos = img.offset(); var overlay = $('<img class="protectionOverlay" src="' + pixelSource + '" width="' + img.width() + '" height="' + img.height() + '" />').css({position: 'absolute', zIndex: 9999999, left: pos.left, top: pos.top}).appendTo('body').bind('mouseleave', function() { setTimeout(function(){ overlay.remove(); }, 0, $(this)); }); if ('ontouchstart' in window) $(document).one('touchend', function(){ setTimeout(function(){ overlay.remove(); }, 0, overlay); }); }); }); </script>
The parameters are highlighted. By default, I've configured the script to use a pixel gif from the Wikimedia commons. (A pixel gif is a 1x1 pixel transparent image.) You should download the referenced file, save it to your site, then replace http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif
in the script with the path to your local copy.
The other option is the useOnAllImages
variable, which is enabled (true
) by default. This means the script will be applied to all images. If this causes problems in your page, make it opt-in by setting useOnAllImages = false
and adding class="protectMe"
to the images you want to protect. For example:
<img src="myphoto.jpg" width="800" height="600" class="protectMe" />
You can use the transparent overlay approach in combination with the previous right-click script, but it's probably better to leave the right-click intact. This will just confuse the casual downloaders.
и еще немного кода:
запрещаем правый клик на фото
document.oncontextmenu = function(e) { e = e || window.event; if (/^img$/i.test((e.target || e.srcElement).nodeName)) return false; };
запрещаем клик колесиком мыши
$('body').on('click', function(e) { if( e.which == 2 ) {e.preventDefault ? e.preventDefault() : e.returnValue = false;} });
у меня на сайте фото открываются в модальном окне magnificPopup и для него я внутри создал пустой див с перекрытием самого фото
$(document).on('click', '.gal-new-img-main', function(e){ $('figure').append('<div class="trans_gif"></div>'); });
+ CSS-стили
figure { position: relative; } .trans_gif { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; }