Подтвердить что ты не робот

Защитить загрузку изображений

Я знаю, что лучший способ защитить загрузку изображений - это не размещать их в Интернете.

Я предполагаю, что нет 100% защиты от загрузки изображений, и что если пользователь может увидеть изображение в Интернете, он может с небольшим опытом найти доступ к его загрузке.

Мне известно о прозрачном .gif или .png покрывающем изображения или использовании CSS-свойства background_image для его защиты и предотвращения загрузки правой кнопкой мыши, но есть

другие способы усложнить загрузку изображений и, следовательно, предотвратить загрузку изображений большинством пользователей?

Вот простой код для начала:

<img src="http://placekitten.com/600/450">
4b9b3361

ОТВЕТЫ

Ответ 1

Нет никакого способа предотвратить выполнение пользователем определенной задачи. Но вы всегда можете принять меры! На сайтах обмена фотографиями есть огромная команда разработчиков, работающих днем ​​и ночью, для создания такого алгоритма, в котором вы запрещаете пользователю сохранять файлы изображений.

Первый способ

Попробуйте следующее:

$('img').mousedown(function (e) {
  if(e.button == 2) { // right click
    return false; // do nothing!
  }
}

Таким образом, пользователь не сможет нажать на кнопку "Сохранить изображение как..." в меню и, в свою очередь, у него не будет возможности сохранить изображение.

Второй способ

Другим способом является использование background-image. Таким образом, пользователь не сможет щелкнуть правой кнопкой мыши и сохранить изображение как... Но он все еще может видеть ресурсы в инспекторе.

Третий способ

Даже я новичок в этом, несколько дней назад я занимался серфингом на Flickr, когда я пытался щелкнуть правой кнопкой мыши, это не позволяло мне что-то делать. Это, в свою очередь, было первым методом, который я вам предоставил. Затем я попытался пойти к инспектору, там ничего не нашел. Зачем? Поскольку они использовали background-image, и в то же время они использовали data:imagesource в качестве своего местоположения.

Это было потрясающе для меня. Вы можете избежать этого.

Он известен как схема URI данных: http://en.wikipedia.org/wiki/Data_URI_scheme

Примечание

Пожалуйста, помните брата, когда вы позволяете пользователю просматривать ваш сайт, вы даете ему разрешения READ на стороне сервера, чтобы он мог без проблем читать все файлы. То же самое происходит с файлами изображений. Он может читать файлы изображений, а затем он может легко их сэкономить. Он загружает изображения на первое место, когда он просматривает ваш сайт. Поэтому для него не проблема, чтобы спасти их на своем диске.

Ответ 2

Еще один способ удалить контекстное меню "Сохранить изображение" - использовать немного CSS. Это также оставляет остальную часть контекстного меню без изменений.

img {
    pointer-events: none;
}

Это делает все элементы img не реагирующими на любые события мыши, такие как перетаскивание, зависание, щелчок и т.д.

Смотрите spec для получения дополнительной информации.

Ответ 3

Если это всего лишь изображение, тогда JavaScript на самом деле не нужен. Попробуйте использовать это в своем HTML файле:

<img src="sample-img-15.jpg" alt="#" height="24" width="100" onContextMenu="return false;" />

Ответ 4

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

Ответ 5

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

$(document).ready(function()
{
    $('img').bind('contextmenu', function(e){
        return false;
    }); 
});

Этот трюк предотвращает щелчок правой кнопкой мыши по всем img. Очевидно, что люди могут открывать исходный код и загружать изображения, используя ссылки в вашем исходном коде.

Ответ 6

Не существует метода полной проверки, позволяющего предотвратить загрузку/кражу ваших изображений.

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

Лично рекомендуемые методы: водяные знаки и флэш. Но это трудная и почти невозможная задача. Пока пользователь может "видеть" это изображение, это означает, что он делает "скриншот", чтобы украсть изображение.

Ответ 7

Вот несколько способов защитить изображения на вашем сайте.

1. Нанесите прозрачный слой или низкопрозрачную маску поверх изображения

Обычно источник изображения открыт для публики на каждой веб-странице. Таким образом, настоящее изображение находится под этой маской и становится недоступным. Убедитесь, что изображение маски соответствует размеру исходного изображения.

<body> 
    <div style="background-image: url(real_background_image.jpg);"> 
        <img src="transparent_image.gif" style="height:300px;width:250px" /> 
    </div> 
</body>

2. Разбейте изображение на маленькие части, используя скрипт

Сверхпростой скрипт изображения плитки используется для этой операции. Скрипт разбивает реальное изображение на части и скрывает реальное изображение с водяным знаком. Это очень полезный и эффективный метод защиты изображений, но он увеличивает запрос сервера на загрузку каждого фрагмента изображения.

Ответ 8

Сначала осознайте, что вы никогда не сможете полностью остановить загрузку изображения, потому что, если пользователь просматривает изображение, он уже (временно) загрузил его в свой браузер.

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

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

Я бы предложил метод, используемый CampSafari, т.е.

img {
    pointer-events: none;
}

но с улучшением:

Итак, сначала давайте удалим URL вашего изображения и добавим к нему атрибуты id. Вот так:

<img id="cutekitten">

Далее нам нужно добавить немного JavaScript, чтобы фактически показать изображение. Держите это подальше от тега <img>, который вы пытаетесь защитить:

document.getElementById("cutekitten").src = "http://placekitten.com/600/450";

Теперь нам нужно использовать CSS:

#cutekitten {
    pointer-events: none;
}

Изображение нельзя перетащить в новое окно, а также загрузить правой кнопкой мыши.

JSFiddle

Еще один метод, который вы можете использовать, это тег embed:

<embed src="http://placekitten.com/600/450"></embed>

Это предотвратит щелчок правой кнопкой мыши.

Ответ 9

Как говорится в других ответах, если вы можете его увидеть, вы можете его скопировать/загрузить.

Чтобы добавить другие ответы, просто для вашей информации вы можете добавить к своим изображениям невидимые или хитрые водяные знаки: http://www.cgrats.com/create-an-invisible-watermark-in-photoshop.html (просто пример, есть больше методов, просто Google для невидимых водяных знаков)

В любом случае, если вы хотите доказать право собственности на свой образ, хороший способ - иметь копию большего разрешения для себя и всегда публиковать более низкое разрешение/размер. Или публиковать его также на "общедоступных" носителях, таких как... deviantart или flickr или что-то там, где люди не могут изменить дату загрузки. Таким образом, вы можете доказать, что у вас был этот образ перед кем-либо еще.

Ответ 10

Как мы знаем, нет правильного способа избежать кражи изображения. Но мы можем уменьшить его в некоторой степени. Мы можем избежать тех людей, которые не выродятся на компьютерах, чтобы загрузить изображение, а также ваш код. Вот несколько трюков JQuery, которые мы должны включить на наш сайт, чтобы уменьшить кражу изображений

  • Отключить правый клик
  • Отключить комбинацию Ctrl + (Ctrl + S, Ctrl + u). [Лучше отключить клавишу Ctrl]

Но пользователь также может загрузить веб-страницу с помощью инструментов разработчика в Firefox. У нас нет решения для этого, потому что это будет на стороне клиента и предоставляется браузером пользователя.

Вы можете найти код для всех перечисленных выше при переполнении стека

Ответ 11

Попробуйте это one-

<script>
    (function($){
      $(document).on('contextmenu', 'img', function() {
          return false;
      })
    })(jQuery);
  </script>

Ответ 12

  1. Отключить правый клик на всех изображениях
let allImages = document.querySelector("img");
allImages.forEach((value)=>{
    value.oncontextmenu = ()=>{
        return false;
    }
})
  1. Отключить событие указателя с помощью CSS
img{
    pointer-events: none;
}
  1. Поместите прозрачное наложение поверх всех изображений
<div class="imageContainer">
    <div class="overlayDiv"></div>
    <img src="Image.jpg" alt="Image">
</div>

И некоторые CSS, как это

.imageContainer{
    position: relative;
}
img{
    position: absolute;
    width: 100%;
    height: auto;
    top: 0px;
    left: 0px;
}
.overlayDiv{
    position: absolute;
    width: 100%;
    height: auto;
    top: 0px;
    left: 0px;
    background-color: transparent;
    z-index: 2;
}
  1. Поместите свое изображение в качестве фонового изображения
div{
    background-image: url(Image.jpg);
    background-size: cover;
}

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