Защита фото на сайте от копирования или сохранения

Сразу стоит сказать, что не существует таких средств, которые гарантированно не позволили бы сохранить изображение с сайта на компьютер. Другое дело, что процесс сохранения можно значительно усложнить, что многим злоумышленникам будет просто лень возиться с вашим сайтом и будет проще найти снимок где-нибудь в другом месте. Пример такой "возни": фото открыто у Вас на странице, однако защита сайта не дает Вам его сохранить. Нажатие кнопочки 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;
}