Как заблокировать скачивание картинок на сайте

#html #javascript #css

Доброго всем времени суток! Подскажите, как сделать так, чтобы нельзя было скачивать
изображения с сайта, то есть когда жмешь на картинку правой кнопкой нельзя было сделать
- "Сохранить картинку как.."    

Ответы

Ответ 1

К сожалению, картинку всё равно можно будет легко скачать простым перетаскиванием
на рабочий стол со страницы. Чтобы обезопасить себя от продвинутых домохозяек, в этом
случае нужно добавить что-то типа:
document.getElementsByTagName('img').ondragstart = function() { return false; };


Ответ 2

Правильное решение выглядит так — http://jsfiddle.net/mmr2t/:
В HEAD добавляем meta заголовок, который отключает тулбар при наведении на фотку,
через который можно сохранить изображение:


Создаем в CSS селектор .locked:
.locked {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: none;
}

Так же добавляем полифил для селектора '.locked' (лучше тоже в HEAD):
/**
 * '.locked' polyfill
 */
(function () {
    "use strict";

    var el = document.createElement('div');
    el.style.cssText = 'pointer-events:auto';

    if (el.style.pointerEvents !== 'auto') {
        el = null;

        var _lock = function (evt) {
            evt = evt || window.event;
            var el = evt.target || evt.srcElement;
            if (el && /\slocked\s/.test(' ' + el.className + ' ')) {
                if (evt.stopPropagation) {
                    evt.preventDefault();
                    evt.stopPropagation();
                } else {
                    evt.returnValue = true;
                    evt.cancelBubble = true;
                }
            }
        };

        if (document.addEventListener) {
            document.addEventListener('mousedown', _lock, false);
            document.addEventListener('contextmenu', _lock, false);
        } else {
            document.attachEvent('onmousedown', _lock);
            document.attachEvent('oncontextmenu', _lock);
        }
    }
})();

Используем:



Ответ 3

var img = document.getElementsByTagName('img');

for(var i in img)
{
    img[i].oncontextmenu = function()
    {
        return false;
    }
}

Заглушка для домохозяек, а тому кому нужно что-то скопировать, он сделает это неприменно!