Limiter la copie d'image

Télécharger le projet
Commenter

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
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (@karamel)