Protéger le téléchargement des images
Je sais que le meilleur moyen de protéger le téléchargement d’images n’est pas de le mettre sur Internet.
Je suppose qu'il n'y a pas de protection à 100% contre le téléchargement d'images et que si un utilisateur peut voir une image sur Internet, il peut, avec un peu d'expérience, trouver l'accès au téléchargement.
Je suis conscient de la transparence .gif ou .png couvrant les images ou utilisant background_image Propriété CSS pour le protéger et empêcher le téléchargement par clic droit, mais existe-t-il
autres moyens de compliquer le téléchargement d’images et donc d’empêcher le téléchargement d’images par la plupart des utilisateurs?
Voici un code simple pour commencer:
<img src="http://placekitten.com/600/450">Non, il n'y a aucun moyen d'empêcher un utilisateur de faire une tâche particulière. Mais vous pouvez toujours prendre des mesures! Les sites Web de partage d’images disposent d’une énorme équipe de développeurs qui travaillent jour et nuit pour créer un tel algorithme empêchant les utilisateurs d’enregistrer les fichiers d’image.
Première manière
Essaye ça:
$('img').mousedown(function (e) {
if(e.button == 2) { // right click
return false; // do nothing!
}
}
Ainsi, l'utilisateur ne pourra pas cliquer sur l'option Enregistrer l'image sous ... du menu et à son tour, il n'aura pas la possibilité d'enregistrer l'image.
Deuxième façon
Une autre façon est d'utiliser background-image. De cette façon, l'utilisateur ne pourra pas cliquer avec le bouton droit de la souris et enregistrer l'image sous ... Mais il pourra toujours voir les ressources dans l'inspecteur.
Troisième voie
Même si je suis nouveau dans celui-ci, il y a quelques jours, je surfais sur Flickr lorsque j'ai essayé de cliquer avec le bouton droit de la souris, cela ne m'a pas laissé faire quoi que ce soit. Ce qui fut à son tour la première méthode que je vous ai fournie. Puis j'ai essayé d'aller voir l'inspecteur, là je n'ai rien trouvé. Pourquoi? Depuis qu'ils utilisaient background-image et en même temps ils utilisaient data:imagesource comme son emplacement.
Ce qui était incroyable pour moi aussi. Vous pouvez empêcher l'utilisateur de sauvegarder facilement des fichiers image.
Il est connu sous le nom de schéma d'URI de données: http://en.wikipedia.org/wiki/Data_URI_scheme
Remarque
S'il vous plaît rappelez-vous frère, lorsque vous laissez un utilisateur naviguer sur votre site Web, vous lui accordez des autorisations de lecture sur le côté serveur afin qu'il puisse lire tous les fichiers sans aucun problème. La même chose est le problème avec les fichiers image. Il peut lire les fichiers image, puis il peut facilement les sauvegarder. Il télécharge les images en premier lieu lorsqu'il navigue sur votre site Web. Il n’ya donc aucun problème pour lui de les sauvegarder sur son disque.
Un autre moyen de supprimer le menu contextuel "enregistrer l'image" consiste à utiliser du code CSS. Cela laisse également le reste du menu contextuel intact.
img {
pointer-events: none;
}
Cela rend tous les img éléments non réactifs aux événements de la souris tels que glisser, survoler, cliquer, etc.
Voir spec pour plus d'informations.
Si ce n'est que l'image, JavaScript n'est pas vraiment nécessaire. Essayez d’utiliser ceci dans votre fichier html:
<img src="sample-img-15.jpg" alt="#" height="24" width="100" onContextMenu="return false;" />
Il n'y a aucun moyen de protéger le téléchargement d'images. En effet, l'image doit être téléchargée par le navigateur pour que l'utilisateur puisse la voir. Il existe des astuces (comme l’arrière-plan transparent que vous avez spécifié) pour limiter certaines opérations, telles que le clic droit de l’image et l’enregistrement dans le dossier cache du navigateur, mais il n’existe aucun moyen de protéger réellement les images.
Comme certaines personnes ont déjà dit qu'il n'est pas possible d'empêcher les gens de télécharger vos photos, une astuce pourrait ressembler à ceci:
$(document).ready(function()
{
$('img').bind('contextmenu', function(e){
return false;
});
});
Cette astuce empêche du clic droit sur tous les img. Évidemment, les gens peuvent ouvrir le code source et télécharger les images en utilisant des liens dans votre code source.
Il n'y a pas de méthode totalement éprouvée pour empêcher le téléchargement/le vol de vos images.
Mais, certaines solutions telles que: filigrane vos images (côté client ou côté serveur), implémentent une image arrière-plan, désactivez/empêchez les clics droits, images de tranche en petit morceaux et ensuite présenter une image complète au navigateur, vous pouvez également utiliser flash pour afficher des images.
Personnellement, les méthodes recommandées sont: Filigranage et flash. Mais c’est une mission difficile et presque impossible à accomplir. Tant que l'utilisateur est capable de "voir" cette image, cela signifie qu'il prend "capture d'écran" pour voler l'image.
Voici quelques moyens de protéger les images sur votre site Web.
1. Placez une couche transparente ou un masque opaque bas sur l'image
Généralement, la source de l'image est ouverte au public sur chaque page Web. Donc, la vraie image est sous ce masque et devient inaccessible. Assurez-vous que l'image du masque doit avoir la même taille que l'image d'origine.
<body>
<div style="background-image: url(real_background_image.jpg);">
<img src="transparent_image.gif" style="height:300px;width:250px" />
</div>
</body>
2. Divisez l'image en petites unités à l'aide d'un script
Un script de mosaïques d'images très simple est utilisé pour cette opération. Le script divise l'image réelle en plusieurs parties et masque l'image réelle sous forme de filigrane. C'est une méthode très utile et efficace pour protéger les images, mais cela augmentera la demande au serveur pour charger chaque image en mosaïque.
Tout d'abord, sachez que vous ne pourrez jamais arrêter complètement le téléchargement d'une image, car si l'utilisateur visualise cette image, il l'a déjà téléchargée (temporairement) sur son navigateur.
Gardez également à l'esprit que la majorité des utilisateurs ne seront probablement pas des développeurs Web, mais ils peuvent quand même examiner le code source.
Je déconseille vraiment de désactiver le clic droit, cela peut être extrêmement frustrant pour l'utilisateur final et n'est pas sûr de toute façon, car l'image peut toujours être glissée dans une nouvelle fenêtre et téléchargée.
Je suggérerais la méthode utilisée par CampSafari i.e.
img {
pointer-events: none;
}
mais avec une amélioration:
Commençons par supprimer l’url de votre image et y ajouter un attribut id. Ainsi:
<img id="cutekitten">
Ensuite, nous devons ajouter du JavaScript pour afficher l'image. Éloignez-le du <img> tag que vous essayez de protéger:
document.getElementById("cutekitten").src = "http://placekitten.com/600/450";
Nous devons maintenant utiliser le CSS:
#cutekitten {
pointer-events: none;
}
L'image ne peut pas être glissée dans une nouvelle fenêtre aussi bien téléchargée via un clic droit.
Une autre méthode que vous pouvez utiliser est la balise embed:
<embed src="http://placekitten.com/600/450"></embed>
Cela empêchera le clic droit.
Comme d'autres réponses l'ont dit, si vous pouvez le voir, vous pouvez le copier/télécharger.
Pour ajouter aux autres réponses, rien que pour votre information, vous pouvez ajouter des filigranes invisibles ou délicats à vos images: http://www.cgrats.com/create-an-invisible-watermark-in-photoshop. html (juste un exemple, il y a plus de techniques, juste Google pour les filigranes invisibles)
Quoi qu'il en soit, si vous voulez prouver la propriété de votre image, une bonne solution consiste à disposer d'une copie de résolution plus grande pour vous-même et à toujours publier une résolution/taille inférieure. Ou publiez-le également sur un média "public" tel que ... deviantart ou flickr, ou quelque chose où les gens ne peuvent pas changer la date de téléchargement. De cette façon, vous pouvez prouver que vous aviez cette image avant tout le monde.
Comme nous le savons, il n’existe pas de méthode appropriée pour éviter le vol d’image. Mais nous pouvons le réduire dans une certaine mesure. Nous pouvons éviter aux personnes qui ne sont pas des geek dans les ordinateurs de télécharger l'image ainsi que votre code. Voici quelques astuces JQuery que nous devrions inclure dans notre site pour réduire le vol d’images
- Désactiver le clic droit
- Désactiver Ctrl + combinaison (ex Ctrl + s, Ctrl + u) [Mieux vaut désactiver la touche Ctrl]
Mais l'utilisateur peut également télécharger la page Web à l'aide des outils de développement de Firefox. Nous n'avons pas de solution à cela car ce sera du côté du client et est fourni par le navigateur de l'utilisateur.
Vous pouvez trouver le code pour tout ce qui est mentionné ci-dessus sur le dépassement de capacité de la pile