Prevent downloading of posted images

Suporte
27

No, I have said it is not a valud option for us.
But it is the most effective way to elude image stealing completly, may be the unique.

28

This is technically doable in a theme component, should not be to expensive to build maybe a few hundred dollars, open up a topic in marketplace

1 curtida
30

Até agora, estávamos tentando dificultar o download de imagens, impedindo que o menu de contexto aparecesse usando o script fornecido acima por @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>

Fizemos uma personalização do tema do discourse e adicionamos o script ao cabeçalho de cada página.

Mas desde a última atualização para 3.2.0.beta5-dev (67244a2318), estávamos tendo erros do discourse quando você tentava abrir um tópico, e tivemos que excluir o script.

Parece que houve algumas mudanças no discourse que impedem que ele funcione.

imagen
imagen1920×1160 110 KB

1 curtida
31

Aqui está uma versão atualizada que consegui corrigir!

<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>
4 curtidas
32

Isso é esperado devido às atualizações do Ember, esse trecho de código já está bem antigo e precisará ser reescrito.

2 curtidas
33

Obrigado, vou tentar o novo script.

Parece que funciona, pelo menos agora o menu de contexto não aparece quando você usa a lightbox.

Você ainda pode baixar a imagem das miniaturas incorporadas na postagem.

34

Olá, @davidkingham

Se entendi bem o script que você escreveu, o segundo impede a abertura do menu de contexto quando você clica com o botão direito em uma imagem que foi aberta na lightbox.

O primeiro deveria fazer o mesmo quando você clica com o botão direito em qualquer imagem, por exemplo, a miniatura na postagem.

Mas não funciona, ainda consigo abrir o menu secundário e abrir a imagem completa em outra janela.

Tentei colocar isso no CSS:

img {
    pointer-events: none;
}

Isso impede a abertura do menu de contexto, mas também impede que você clique na imagem para abrir a lightbox.

O que está errado?

Seria ótimo ocultar os links de download sob a lightbox.

Eu tinha esta entrada no CSS anteriormente:

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

Mas agora também não parece funcionar, pois os links download e imagem original são mostrados de qualquer forma sob a imagem da lightbox.

ATUALIZAÇÃO:
Modifiquei o segundo script para incluir também .lightbox-wrapper, e agora parece funcionar e o menu de contexto não é exibido quando você clica com o botão direito em uma imagem em uma postagem, e ele abre corretamente a lightbox quando você clica na imagem.

<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>

Devo excluir o primeiro script que tenta fazer o mesmo em um objeto img genérico?

Se eu substituir o CSS de .img-source-link por .mfp-title, funciona, e agora os links de download não são visíveis, mas o título também é ocultado. Não entendo por que ocultar apenas os links não funciona e funciona quando você oculta toda a barra de título.

.mfp-title {
    display: none;
}
35

Não tenho certeza sobre o primeiro item, pois não estou vendo esse comportamento. Mas para o link da imagem, você pode usar isto:

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

Isso deixa alguns · · extras para trás, mas é a única maneira que eu poderia ocultar apenas o link de download (e o link de visualização em tamanho real).

1 curtida
36

Muito obrigado.
Não sei o que é !important, mas funciona, os .. no final não parecem muito importantes :wink:

É assim que o CSS e os Scripts estão agora e obtemos o comportamento desejado: nenhuma das imagens do site pode ser baixada clicando com o botão direito sobre elas e os links de download na lightbox estão ocultos.
Obrigado pela sua orientação.

CSS

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

Scripts do cabeçalho:

<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>

O primeiro parece desativar o menu de contexto em outras imagens do site, como ícones ou miniaturas de avatar.

O segundo funciona para imagens em uma postagem e na lightbox.

1 curtida