Hallo,


Ik hoop dat iemand mij kan helpen.
Ik heb een website waar foto's opstaan. Nu heb ik al een code toegevoegd waardoor de rechtermuisknop uitgeschakeld is.
Maar als ik een foto van de website ga slepen naar mijn Bureaublad kan deze nog altijd eraf pakken. Is hier een aparte code voor dat ik dit ook kan uitzetten of is er iemand nie misschien een ander idee heeft?

Vriendelijk bedankt
Theo Wolters

Hallo Theo,

Eerste vraag: Waarom mogen de afbeeldingen niet opgeslagen worden?

De foto's worden in de DOM geladen, deze is gewoon beschikbaar voor de client - dus ook alle foto's. Heb je foto's met copyright, dan zou ik zorgen voor een watermerk. Dit werkt beter, dan - de oplossing die je al hebt ingebouwd - zoals een muis blokkeren. Je zou kunnen kijken naar: https://www.visualwatermark.com/

Gebruikt je website Wordpress of een ander CMS, dan zou je kunnen kijken naar een plugin welke dit voor je kan automatiseren.

Er zijn meerdere oplossingen voor dit slepen. Maar belangrijk om te weten: ALS iemand je foto's wil kopiëren dan kan dat. Je maakt het met methodes als dit alleen 'iets' lastiger.

Een css oplossing zou zijn:

Code:

img{
   pointer-events: none;
}

Een html oplossing zou zijn:

Code:

<img src="..." draggable="false" />

Hallo Wilbert,

Momenteel heb ik dit stukje in mijn css staan.

<script>
document.addEventListener('contextmenu',function(e ){e.preventDefault();e.stopPropagation();});
document.addEventListener('copy',function(e){e.pre ventDefault();e.stopPropagation();});
document.addEventListener('cut',function(e){e.prev entDefault();e.stopPropagation();});
</script>
<style>
.jw-album-image img, .jw-element-image img { pointer-events: none; -webkit-touch-callout: none; }
.pswp__share-tooltip .pswp__share--download { display: none; }
</style>

Dit werkt eigenlijk perfect op het slepen na. Kun je mij vertellen waar dat stukje van jou erbij komt?
Want ik heb het idee dat het er al inzit, maar hij doet het alleen niet helaas.

Vriendelijk bedankt
Theo



[QUOTE=Wilbert E.;1249137]Er zijn meerdere oplossingen voor dit slepen. Maar belangrijk om te weten: ALS iemand je foto's wil kopiëren dan kan dat. Je maakt het met methodes als dit alleen 'iets' lastiger.

Een css oplossing zou zijn:

Code:

img{
   pointer-events: none;
}

Een html oplossing zou zijn:

<script>
document.addEventListener('contextmenu',function(e ){e.preventDefault();e.stopPropagation();});
document.addEventListener('copy',function(e){e.pre ventDefault();e.stopPropagation();});
document.addEventListener('cut',function(e){e.prev entDefault();e.stopPropagation();});
</script>
<style>
.jw-album-image img, .jw-element-image img { pointer-events: none; -webkit-touch-callout: none; }
.pswp__share-tooltip .pswp__share--download { display: none; }
</style>

Er zijn scripts die het echt blokkeren en ook screenshots tegengaan (dan krijg je een screenshot met strepen) maar die zijn erg duur. Andere optie: plaats de afbeeldingen als achtergrondafbeelding achter een transparante GIF. Dan gaan mensen die GIF opslaan.

Hallo,


Hoeveel zou zo'n script ongeveer kosten dan?
En je andere optie, die begrijp ik nog niet helemaal helaas. Doe je dit via adobe photoshop?
Want ik kan alleen met lagen werken. Misschien je mij hier meer uitleg over kunt geven?

Vriendelijk bedankt
Theo

Dit soort programma's zijn zo makkelijk te omzeilen dat je je geld echt verspilt. Een afbeelding wordt namelijk altijd in je temporary map opgeslagen dus desnoods kun je het daar uithalen. Daarnaast zijn er ook download programma's die gratis en voor niks de foto's eraf rippen of gewoon de hele server map kopiëren. Dus of je nu een print screen bescherming hebt (die overigens niet werkt als je een print screen maakt met een ander programma op de voorgrond, dan pakt hij wel hele afbeelding) of niet: ze pakken altijd de volledige foto.

Wil je echt een foto beschermen kun je het beste een gehele watermark over de foto gooien of een speciale code in je foto gooien en daar op zoeken in Google image. Als jouw probleem alleen doorverkoop is kun je via deze code altijd je foto's achterhalen. Deze codes zijn bijna niet zichtbaar en kun je over de gehele foto plaatsen.

De afbeelding inladen via css als background-image.

Zou persoonlijk voor een watermerk kiezen, tegenhouden van kopie opslaan kan bijna niet of is duur qua oplossing. F12 open ik de console, CTRL + U open ik de bron en zie ik dus de adres van de foto. Via de browser menu de bron bekijken en noem zo maar op.

Watermerk kan je, indien goed geplaatst, niet weghalen van een foto waardoor ze minder geneigd zijn deze beelden op te slaan.

Dat script wat ik bedoel, werkt echt. Maar het is lang geleden, ik weet het niet meer te vinden. Het werd gebruikt op een grote Amerikaanse site (Vanity Fair) en het lukte ons echt niet om een foto van een celebrity (ik meen Beyonce) er af te halen. Niet met de PC, niet met de Mac of met iPad. Een schermafdruk ging ook niet, die werd omgetoverd tot een schaakbord. Niet via de broncode of CSS, de afbeelding zat ook nergens in de tmp/cache (wat ons het meest verbaasde) etc. Mijn collega heeft het script opgezocht, ik meen dat het vele honderden dollars of misschien wel een paar duizend dollar kostte. Achteraf was het misschien wel gelukt met een videograbber dus of dat script een definitieve oplossing is, ik betwijfel het.

De suggestie van Willem Konings is denk ik de makkelijkste manier om het in ieder geval een stuk moeilijker te maken. Maak een DIV met de afmetingen van de foto, en stel daarin de foto in als achtergrond foto. Eventueel kun je (zoals ik bedoelde) ook nog een transparante gif van 1x1 pixel als gewone afbeelding in die DIV zetten. Als je in de HTML-code aangeeft dat die dezelfde afmetingen als de DIV heeft, zit die er dus steeds voor.

Een screenshot houd je daar niet mee tegen. Daartegen helpt alleen een watermerk (dan wel midden over de foto heen anders croppen ze hem er weer af).