Limiter la copie d'image

Soyez le premier à donner votre avis sur cette source.

Vue 4 662 fois - Téléchargée 566 fois

Description

le scripte empêche la copie d'un image par glisser déposer ou en faisant enregistrer-sous pour ce faire j'utilise canvas afin de découper l'image en plusieurs morceaux qui sonts ensuite réasssemblé afin de recréer l'image ce qui fait que si on cherche a recopié l'image on se retrouve avec des petits morceaux et a ceci j'y ai rajouté un filigrane contre la touche imprime ecran.

note
avec chrome sa marchera si la source est en ligne et c'est incompatible avec ie8 et inférieure du fait de l'utilisation de canvas

page teste attention aux espaces qui sonts a supprimé : http://scriptevol.toile-libre.org/scriptsite/nocodia/nocodia.html

Source / Exemple :


ffunction nocopie(mago){

	/////////////////////
	//partie filigrane//
	///////////////////

	var moncanvas2=document.createElement('canvas');
	moncanvas2.id='cc'
	
	var moncanvas22d=moncanvas2.getContext('2d');
	
	var ima = new Image();		//prechargement de l'image a visualisé
	ima.src = mago;
	ima.onload = function () {
		
		moncanvas2.width=ima.width;		//le canvas prend la taille de d'image                 
		moncanvas2.height=ima.height;
		
		moncanvas22d.drawImage(ima,0,0);		//on dessine l'image dans le canvas
		
		for (var i = 0; i < ima.width; i+=100){		//boucle pour le calcule de la position du filigrane en hauteur dans le canvas
			
			for (var j = 20; j < ima.height; j+=100){		//boucle pour le calcule de la position du filigrane en largeur dans le canvas
				
				moncanvas22d.fillStyle = "rgba(0,20,180,0.4)";
				moncanvas22d.font = "10pt Calibri,Geneva,Arial";
				moncanvas22d.fillText('nocopie', i, j)		//le texte en filigrane
			}
		}
		

		//////////////////////////////
		//partie decoupe de l'image//
		////////////////////////////
		
		var decoupe=32		// valeur de decoupage de l'image modifiable
		
		var moncanvas=document.createElement('canvas');		//creation d'un canvas a l'interieur d'une variable local
		var moncanvas2d=moncanvas.getContext('2d');
		
		var cranl=0;
		var cranh=0;
		var largeur=Math.floor(ima.width/decoupe);		//hauteur des portion d'image
		var hauteur=Math.floor(ima.height/decoupe);		//largeur des portion d'image
		var finl=(ima.width % decoupe);		//les pixels en largeur restante 
		var finh=(ima.height % decoupe);	//les pixels en hauteur restante 
		
		moncanvas.width=largeur;		//le canvas prend la taille des portions d'image
		moncanvas.height=hauteur;
		
		for (var i = 0; i < decoupe; i++){		//boucle pour le calcule de la position d'image en hauteur dans le canvas
			
			if (i == decoupe-1) {
				moncanvas.height=finh+hauteur;
			}
			
			for (var j = 0; j < decoupe; j++){		//boucle pour le calcule de la position d'image en largeur dans le canvas
				
				if (j == decoupe-1) {
					moncanvas.width=largeur+finl;
				}
				
				moncanvas2d.drawImage(moncanvas2,-cranl,-cranh);		//on dessine la portion d'image dans le canvas
				
				var base64 = moncanvas.toDataURL("image/jpg");		//on converti en jpg la portion d'image que l'on enregistre dans une variable 
				var construction=document.createElement('img');		//on cree une balise image et on lui donne comme src la variable contenant la portion d'image
				construction.src=base64;
				document.getElementById('divgem').appendChild(construction);		//la portion d'image est inséré dans le div contenant toutes portions d'images
				
				cranl+=largeur;
			}
			
			cranl=0;
			moncanvas.width=largeur;
			
			cranh+=hauteur;		//quand une ligne est entierement cree on fait un saut de ligne (br) afin de commencer une nouvelle ligne
			
			var construction=document.createElement('br');
			document.getElementById('divgem').appendChild(construction);
		}
		document.getElementById('divgem').style.height=ima.height+'px'
		document.getElementById('divgem').style.width=ima.width+'px'
	}	
}

Conclusion :


a tester

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
1764
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
10 juillet 2020
83
et donc j'ai rajouté du texte en filigrane contre la copie d'ecran

j'ai pourtant préciser que la source limitait uniquement la copie d' image par glisser déposer ou en faisant enregistrer-sous
et je suis étonné de n'avoir eu aucunes critique sur la technique globale utilisé pour faire la découpe.

LeFauve42

ta technique est imparable mais tres lourde a mettre en oeuvre et pas dynamique
Messages postés
239
Date d'inscription
vendredi 20 octobre 2006
Statut
Membre
Dernière intervention
20 avril 2009

Il faut relativiser.

Le but n'est pas d'empêcher le quidam moyen de copier quelques images sur ton site pour son usage perso, mais plutôt d'empêcher un script automatique de pomper automatiquement les 5000 photos de ton site en 3 clicks.
J'admire la constance qu'ont certains à essayer d'empêcher l'utilisation d'une fonction qui ne résiste pas à une simple copie directe d'écran qui pullulent sur Internet !!!!!
Messages postés
239
Date d'inscription
vendredi 20 octobre 2006
Statut
Membre
Dernière intervention
20 avril 2009

> Ça n'empêchera pas une copie d'écran pour récupérer l'image !

C'est ce que je voulais dire par "print screen" :o)
Messages postés
15
Date d'inscription
samedi 22 novembre 2008
Statut
Membre
Dernière intervention
21 avril 2016

Ça n'empêchera pas une copie d'écran pour récupérer l'image !
Afficher les 8 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.