Cette page se décline en 3 versions

Choisissez l'effet désiré :

Effet désiré

Retouche d'images simples en JavaScript

Ci-dessous, voici le code JavaScript d'une fonction intitulée modifie qui transforme une image en couleurs en une image en nuances de gris.

Plus bas, vous aurez à disposition un cadre de texte que vous pourrez modifier le code ; si la syntaxe est juste, le changement sera effectif dans la fenêtre de droite.

Exercice

Apportez les modifications nécessaires pour afficher l'image avec seulement la composante rouge, la verte, la bleu, éclaircissez l'image, assombrissez-la...

<script>
	function modifie(){
		var imageDataResult=ctx.createImageData(image.width,image.height);
		
		var gris;
		var ancien_rouge;
		var ancien_vert;
		var ancien_bleu;
		var nouveau_rouge;
		var nouveau_vert;
		var nouveau_bleu;
		var transparence;

		for(var K=0,l=imageDataSource.data.length;K<l;K=K+4){
			imageDataSource.data[K];
			ancien_rouge=imageDataSource.data[K];
			ancien_vert=imageDataSource.data[K+1];
			ancien_bleu=imageDataSource.data[K+2];
			transparence=imageDataSource.data[K+3];

    //Partie a modifier - definition des nouvelles couleurs de la nouvelle image
			gris=0.2126*ancien_rouge+0.7152*ancien_vert+0.0722*ancien_bleu;

			nouveau_rouge=gris;
			nouveau_vert=gris;
			nouveau_bleu=gris; 
    //Fin de a partie a modifier  

			imageDataResult.data[K]=nouveau_rouge;
			imageDataResult.data[K+1]=nouveau_vert;
			imageDataResult.data[K+2]=nouveau_bleu;
			imageDataResult.data[K+3]=transparence;
		}
		ctx.putImageData(imageDataResult,0,0); 
	}
</script>

Modifier - dans le fenêtre Code à modifier - la fonction modifie ci-dessous afin d'exécuter l'éclaircissement d'image, le passage en niveaux de gris et le seuil.

Attention ! : il est inutile (et déconseillé) de modifier le reste du code.

Code à modifier

for(var K=0,l=imageDataSource.data.length;K<l;K=K+4){
			imageDataSource.data[K];
			ancien_rouge=imageDataSource.data[K];
			ancien_vert=imageDataSource.data[K+1];
			ancien_bleu=imageDataSource.data[K+2];
			transparence=imageDataSource.data[K+3];

//Partie a modifier - definition des nouvelles couleurs de la nouvelle image
			gris=0.2126*ancien_rouge+0.7152*ancien_vert+0.0722*ancien_bleu;

nouveau_rouge=gris;
			nouveau_vert=gris;
			nouveau_bleu=gris;
    //Fin de a partie a modifier

imageDataResult.data[K]=nouveau_rouge;
			imageDataResult.data[K+1]=nouveau_vert;
			imageDataResult.data[K+2]=nouveau_bleu;
			imageDataResult.data[K+3]=transparence; 
		}
		ctx.putImageData(imageDataResult,0,0); 
	}
</script>

btnModifie.onclick=modifie;
btnretour.onclick=retour;

var image = document.getElementById("monImage");
var canvas = document.getElementById("monCanvas");

var ctx = canvas.getContext("2d");

image.onload=function(){
		canvas.width=image.width;
		canvas.height=image.height;
		ctx.drawImage(image,0,0);
		imageDataSource = ctx.getImageData(0, 0,image.width,image.height);
	}

function conversion(x,y){
		return (y*image.width+x)*4;	
	}

function retour(){
		var imageDataResult=ctx.createImageData(image.width,image.height);
		var posSrc,posDest;
		for(var y=0,h=image.height;y<h;y++){
			for(var x=0,w=image.width;x<w;x++){
				posSrc=conversion(x,y);
				posDest=conversion(x,y);
				for(var i=0;i<4;i++)imageDataResult.data[posDest+i]=imageDataSource.data[posSrc+i];

}
		}

ctx.putImageData(imageDataResult, 0, 0); 
	}
</script>

.bouton:hover{
	position: relative;
	width: 210px;
	line-height: 28px;
	display: inline-block;
	margin: 0 0 0 60px;
	padding: 0 2px;
	text-decoration: none;	
	color: #FFFFFF;
    	border: 2px solid #FFFFFF;
	border-radius: 12px;
	background: #1d1f1e;
	box-shadow: 4px 2px 5px #1d1f1e,
                0 -1px 0 white;
}
</style>
</body>
</html>

Algorithmique et traitement de l'image

Cette page se décline en 3 versions

Retouche d'images simples en JavaScript

Exercice

Code à modifier

Image rendue