Prevent downloading of posted images

Supporto
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 Mi Piace
30

Finora abbiamo cercato di rendere difficile il download delle immagini impedendo la comparsa del menu contestuale utilizzando lo script fornito sopra da @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>

Abbiamo personalizzato il tema di discourse e aggiunto lo script all’header di ogni pagina.

Ma dall’ultimo aggiornamento a 3.2.0.beta5-dev (67244a2318) abbiamo riscontrato errori da discourse quando si cercava di aprire un topic, e abbiamo dovuto eliminare lo script.

Sembra che ci siano state alcune modifiche in discourse che ne impediscono il funzionamento.

imagen
imagen1920×1160 110 KB

1 Mi Piace
31

Ecco una versione aggiornata che sono riuscito a correggere!

<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 Mi Piace
32

Questo è previsto a causa degli aggiornamenti di Ember, lo snippet di codice è piuttosto vecchio a questo punto e dovrà essere riscritto.

2 Mi Piace
33

Grazie, proverò il nuovo script.

Sembra che funzioni, almeno ora il menu contestuale non appare quando si usa la light box.

È ancora possibile scaricare l’immagine dalle miniature incorporate nel post.

34

Ciao, @davidkingham

Se ho capito bene lo script che hai scritto, il secondo impedisce l’apertura del menu contestuale quando fai clic con il pulsante destro del mouse su un’immagine aperta nella lightbox.

Il primo dovrebbe fare lo stesso quando fai clic con il pulsante destro del mouse su qualsiasi immagine, ad esempio la miniatura nel post.

Ma non funziona, posso ancora aprire il menu secondario e aprire l’immagine completa in un’altra finestra.

Ho provato a inserire questo nel CSS:

img {
    pointer-events: none;
}

Impedisce l’apertura del menu contestuale, ma impedisce anche di fare clic sull’immagine per aprire la lightbox.

Cosa c’è di sbagliato?

Sarebbe fantastico nascondere i link per il download sotto la lightbox.

In precedenza avevo questa voce nel CSS:

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

Ma ora sembra non funzionare più, poiché i collegamenti download e immagine originale vengono comunque visualizzati sotto l’immagine della lightbox.

AGGIORNAMENTO:
Ho modificato il secondo script per includere anche .lightbox-wrapper, e ora sembra funzionare e il menu contestuale non viene mostrato quando fai clic con il pulsante destro del mouse su un’immagine in un post, e apre correttamente la lightbox quando fai clic sull’immagine.

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

Dovrei eliminare il primo script che tenta di fare la stessa cosa su un oggetto img generico?

Se sostituisco il CSS di .img-source-link con .mfp-title funziona, e ora i link per il download non sono visibili, ma anche il titolo è nascosto. Non capisco perché nascondere solo i link non funzioni e funzioni quando si nasconde l’intera barra del titolo.

.mfp-title {
    display: none;
}
35

Non sono sicuro del primo elemento poiché non riscontro tale comportamento. Ma per il link dell’immagine puoi usare questo:

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

Lascia alcuni · · extra, ma è l’unico modo in cui ho potuto nascondere solo il link per il download (e il link per la visualizzazione a dimensione intera).

1 Mi Piace
36

Grazie mille.
Non so cosa sia !important ma funziona, i puntini finali non sembrano troppo importanti :wink:

Questo è come sono ora CSS e Script e otteniamo il comportamento desiderato: nessuna delle immagini nel sito può essere scaricata facendo clic con il pulsante destro del mouse su di esse e i collegamenti per il download nella lightbox sono nascosti.
Grazie per la tua guida.

CSS

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

Script nell’header:

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

Il primo sembra disabilitare il menu contestuale su altre immagini nel sito come icone o miniature di avatar.

Il secondo funziona per le immagini in un post e nella lightbox.
1 Mi Piace