Защита изображения от загрузки правой кнопкой мыши

Question

РЕДАКТИРОВАТЬ: В ответ на многие комментарии я знаю, что нет никакого надежного способа полностью защитить изображение от загрузки. Этот метод предотвращает загрузку случайного пользователя простым щелчком правой кнопки мыши. Вероятно, лучшим способом было бы просто защитить ваши изображения авторскими правами, а если вы очень обеспокоены, то воспользовались бы услугами, такими как Digimarc, для нанесения водяных знаков на ваше цифровое изображение. Теперь к вопросу:

Я наткнулся на сайт, который использует наложение GIF поверх фактического изображения, поэтому оно защищает изображение от щелчка правой кнопкой мыши и загрузки изображения (хотя вы все равно можете получить фактическое изображение из кода). Код, который они используют для этого:

<div><img src="-Transparent GIF File-" alt="" width="530" height="558" 
border="0" original="-Actual Image Displayed-" /></div>

Мой вопрос - тег original не является реальным тегом и используется и переводится Javascript в некотором роде. Я хотел бы повторить это на моем сайте. Может кто-нибудь помочь мне найти этот скрипт?

Answer 1

Это бессмысленно. Если браузер отображает изображение, оно может быть снято. Любая попытка предотвратить это - просто накладные расходы сайта, которые можно очень легко обойти.

Ваша лучшая защита - это разместить уведомление об авторских правах на самих изображениях.

В любом случае, если вы действительно хотите поменять атрибут original, вы можете ...

$(function() {
var o = $('img').attr('original');
$('img').attr('src', o);
});

Демо здесь

но ... это ничего не делает для предотвращения выбора пользователем и сохранения изображения, связанного с атрибутом original.

Answer 2

Более простое решение для того, что вы пытаетесь сделать, это добавить все эти атрибуты в тег img:

ondrag="return false"
ondragstart="return false"
oncontextmenu="return false"
galleryimg="no"
onmousedown="return false"

Кроме того, чтобы при желании уменьшить размер изображения, добавьте его в imgtag:

class="imgPrint"

И включите этот связанный CSS:

@media print
{
    .imgPrint
    {
        width: 40%;
    }
}

Answer 3

Вы также можете сделать это без оригинального тега:

http://rainbow.arch.scriptmania.com/scripts/no_right_click.html

см. Эту ссылку.

Я думаю, это то, что вы хотите, эта ссылка может помочь вам.

Answer 4

Это моя реализация для легкой защиты изображений.

Это создаст прозрачный элемент DOM обложки над изображением (или текстом). Если вы отключите JavaScript, изображение будет скрыто, а при удалении обложки изображение будет скрыто при наведении мыши. Также правый клик по изображениям отключен.

Вы всегда можете распечатать экран, получить загруженные ресурсы и т. Д. И т. Д. Это отфильтрует только самые основные способы загрузки. Но для более удобной защиты вы должны скрыть путь к изображению и выполнить рендеринг в объект Canvas.

Вы можете улучшить это, но всегда есть способ получить изображение.

Проверено на основных браузерах и работает!

HTML

<div class="covered">
    <img src="image.jpg" alt="" />
</div>

JAVASCRIPT + JQUERY

$('.covered').each( function () {

    $(this).append('<cover></cover>');
    $(this).mousedown(function(e){ 
        if( e.button == 2 ) { 
            e.preventDefault();

          return false; 
        } 
        return true;
    });

    $('img', this).css('display', 'block');

    $(this).hover(function(){
        var el = $('cover', this);
        if (el.length <= 0) { 
            $(this).html('');
        }
    });
});

CSS

cover
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.covered
{
    position: relative;
}

.covered img
{
    display: none;
}