Prevent downloading of posted images

Поддержка
27

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

28

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

30

До сих пор мы пытались затруднить скачивание изображений, предотвращая появление контекстного меню, используя скрипт, предоставленный выше пользователем @awesomerobot:

<script type="text/discourse-plugin" version="0.8">
const TopicRoute = require("discourse/routes/topic").default;
TopicRoute.reopen({ activate: function() { this._super(); Em.run.next(function() { $('body').on('contextmenu', '.cooked img, .mfp-img', function(e){ return false; }); }); } }); 
</script>

Мы внесли изменения в тему Discourse и добавили этот скрипт в заголовок каждой страницы.

Однако после последнего обновления до версии 3.2.0.beta5-dev (67244a2318) при попытке открыть тему возникали ошибки в Discourse, и нам пришлось удалить скрипт.

Похоже, что в Discourse произошли изменения, которые препятствуют его работе.

imagen
imagen1920×1160 110 KB

31

Вот обновлённая версия, которую мне удалось исправить!

<script type="text/discourse-plugin" version="0.8">
  api.onPageChange((url, title) => {
    $("img").on("contextmenu", function(e) {
      e.preventDefault();
    });
  });
</script>

<script type="text/discourse-plugin" version="0.8">
  api.onPageChange((url, title) => {
    $("body").on("contextmenu", ".cooked img, .mfp-img", function(e) {
      e.preventDefault();
    });
  });
</script>
32

Это ожидаемо из-за обновлений Ember: данный фрагмент кода уже довольно устарел и потребует переписывания.

33

Спасибо, я попробую новый скрипт.

Кажется, всё работает: теперь контекстное меню не появляется при использовании лайтбокса.

Вы всё ещё можете скачать изображение из встроенных миниатюр в посте.

34

Привет, @davidkingham

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

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

Но это не работает: я всё ещё могу открыть вторичное меню и открыть полное изображение в отдельном окне.

Я пытался добавить это в CSS:

img {
    pointer-events: none;
}

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

Что не так?

Было бы здорово скрыть ссылки для скачивания под лайтбоксом.

Ранее у меня в CSS был следующий блок:

.image-source-link
{
    display: none;
}

Но теперь это тоже, кажется, не работает, так как ссылки download и original image всё равно отображаются под изображением в лайтбоксе.

ОБНОВЛЕНИЕ:

Я модифицировал второй скрипт, добавив туда .lightbox-wrapper, и теперь, кажется, всё работает: контекстное меню не появляется при щелчке правой кнопкой мыши по изображению в посте, а лайтбокс корректно открывается при обычном клике по изображению.

<script type="text/discourse-plugin" version="0.8">
  api.onPageChange((url, title) => {
    $("body").on("contextmenu", ".cooked img, .mfp-img, .lightbox-wrapper", function(e) {
      e.preventDefault();
    });
  });
</script>

Стоит ли мне удалить первый скрипт, который пытается сделать то же самое для общего объекта img?

Если я заменю CSS для .img-source-link на .mfp-title, это работает: ссылки для скачивания больше не видны, но скрывается и заголовок. Я не понимаю, почему скрытие только ссылок не работает, а скрытие всей панели заголовка — работает.

.mfp-title
{
    display: none;
}
35

По первому пункту я не уверен, так как не наблюдаю такого поведения. Но для ссылки на изображение можно использовать следующее:

.image-source-link {
    display: none !important;
}

Это оставляет после себя лишние · ·, но это единственный способ, которым я мог скрыть только ссылку на скачивание (и ссылку «Посмотреть в полном размере»).

36

Спасибо большое.
Я не знаю, что такое !important, но это работает, а завершающие точки, похоже, не так важны :wink:

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

CSS

.image-source-link
{
    display: none !important;
}

Скрипты в заголовке:

<script type="text/discourse-plugin" version="0.8">
  api.onPageChange((url, title) => {
    $("img").on("contextmenu", function(e) {
      e.preventDefault();
    });
  });
</script>
<script type="text/discourse-plugin" version="0.8">
  api.onPageChange((url, title) => {
    $("body").on("contextmenu", ".cooked img, .mfp-figure, .lightbox-wrapper", function(e) {
      e.preventDefault();
    });
  });
</script>

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

Второй работает для изображений в постах и в лайтбоксе.