Cette page se décline en 3 versions

Choisissez l'effet désiré :

Effet désiré

Seuil et « Wharolization » en JavaScript

Ci-dessous, voici le code JavaScript d'une fonction intitulée modifie qui transforme une image en couleurs en une image en noir et blanc, avec effet de seuil.

Le seuillage d'image est la méthode la plus simple de segmentation d'image. À partir d'une image en niveau de gris, le seuillage d'image peut être utilisé pour créer une image comportant uniquement deux valeurs, noir ou blanc (monochrome). On remplace un à un les pixels d'une image par rapport à une valeur seuil fixée (par exemple 123). Ainsi, si un pixel à une valeur supérieure au seuil (par exemple 150), il prendra la valeur 255 (blanc), et si sa valeur est inférieure (par exemple 100), il prendra la valeur 0 (noir).

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 créer une image à deux tons, plutôt « flashy », style « Andy Wharol », à ces méduses.

<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  
			gris=0.2126*ancien_rouge+0.7152*ancien_vert+0.0722*ancien_bleu;
			seuil=100;
			if (gris>seuil)	{
				nouveau_rouge=255;
				nouveau_vert=255;
				nouveau_bleu=255;
					}
			else		{
				nouveau_rouge=0;
				nouveau_vert=0;
				nouveau_bleu=0;
					}
		}
		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;
			seuil=100;
			if (gris>seuil)	{
				nouveau_rouge=255;
				nouveau_vert=255;
				nouveau_bleu=255;
					}
			else		{
				nouveau_rouge=0;
				nouveau_vert=0;
				nouveau_bleu=0;
					}
    //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

Seuil et « Wharolization » en JavaScript

Exercice

Code à modifier

Image rendue