bitmap

Gris gris

Dans l'exemple suivant, une image est chargée puis recopiée dans l'élément canvas après traitement sur ses pixels.

La boucle de traitement des pixels n'est pas écrite. Il s'agit de griser chaque pixel.

Pour cela, la consigne est ici de remplacer chaque composante R, G, B d'un pixel par la moyenne des composantes R, G, B de ce pixel.

<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="utf-8">
<title>Canvas HTML5</title>
 
</head>
<body>

 
	<canvas id="fruits" width="350" height="350">
		 
	</canvas>
	
	
 
<script>


var c = document.getElementById("fruits");
var ctx = c.getContext("2d");

var desFruits = new Image();
desFruits.src = "images/fruit.jpg";

desFruits.onload = function(){

	ctx.drawImage(desFruits, 15, 15);

	var fruitsTristes = ctx.getImageData( 15, 15, desFruits.width, desFruits.height);

	var lescomposantesrgb = fruitsTristes.data;

	 
	 // ECRIRE ICI LA BOUCLE DE TRAITEMENT DES PIXELS
	 // QUI DEVRA GRISER CHAQUE PIXEL EN REMPLACANT CHAQUE COMPOSANTE R, G, B
	 // PAR LA MOYENNE DES TROIS COMPOSANTES RGB
	 // (la composante alpha restera inchangée)
	
	// copie du résultat  sous  l'original :
	ctx.putImageData( fruitsTristes, 15, 30 + desFruits.height );
}

</script> 

</body>
</html>

Un code possible :

<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="utf-8">
<title>Canvas HTML5</title>
 
</head>
<body>

 
	<canvas id="fruits" width="350" height="350">
		 
	</canvas>
	
	
 
<script>


var c = document.getElementById("fruits");
var ctx = c.getContext("2d");

var desFruits = new Image();
desFruits.src = "images/fruit.jpg";

desFruits.onload = function(){

	ctx.drawImage(desFruits, 15, 15);

	var fruitsTristes = ctx.getImageData( 15, 15, desFruits.width, desFruits.height);

	var lescomposantesrgb = fruitsTristes.data;

	for(let i = 0; i < lescomposantesrgb.length; i += 4) {
		var m = Math.floor( (lescomposantesrgb[i] +  lescomposantesrgb[i + 1] +  lescomposantesrgb[i + 2]) / 3 );
		lescomposantesrgb[i] = m; // Rouge
		lescomposantesrgb[i + 1] = m; // Vert
		lescomposantesrgb[i + 2] = m; // Bleu
		// lescomposantesrgb[i+3]  composante alpha non modifiée
	}
	
	// copie le résultat 10px en-dessous de l'original
	ctx.putImageData( fruitsTristes, 15, 30 + desFruits.height );
}

</script> 

</body>
</html>

Négatif

Dans l'exemple suivant, une image est chargée puis recopiée dans l'élément canvas après traitement sur ses pixels.

La boucle de traitement des pixels n'est pas écrite.

L'objectif est d'obtenir le négatif de l'image. Pour cela, il suffit de remplacer chaque composante RGB par son complément à 255 (une valeur x est donc remplacée par la valeur 255-x).

<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="utf-8">
<title>Canvas HTML5</title>
 
</head>
<body>

 
	<canvas id="fruits" width="350" height="350"></canvas>
	
<script>
var c = document.getElementById("fruits");
var ctx = c.getContext("2d");

var desFruits = new Image();
desFruits.src = "images/fruit.jpg";

desFruits.onload = function(){

	ctx.drawImage(desFruits, 15, 15);

	var fruitsNegatif = ctx.getImageData( 15, 15, desFruits.width, desFruits.height);

	var lescomposantesrgb = fruitsNegatif.data;

	 
	 // ECRIRE ICI LA BOUCLE DE TRAITEMENT DES PIXELS
	 // QUI DEVRA GRISER CHAQUE PIXEL EN REMPLACANT CHAQUE COMPOSANTE R, G, B
	 // PAR SON COMPLEMENT A 255 
	
	// copie du résultat  sous  l'original :
	ctx.putImageData( fruitsNegatif, 15, 30 + desFruits.height );
}
</script> 
</body>
</html>

Un code possible :

<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="utf-8">
<title>Canvas HTML5</title>
 
</head>
<body>

 
	<canvas id="fruits" width="350" height="350">
		 
	</canvas>
	
	
 
<script>


var c = document.getElementById("fruits");
var ctx = c.getContext("2d");

var desFruits = new Image();
desFruits.src = "images/fruit.jpg";

desFruits.onload = function(){

	ctx.drawImage(desFruits, 15, 15);

	var fruitsNegatif = ctx.getImageData( 15, 15, desFruits.width, desFruits.height);

	var lescomposantesrgb = fruitsNegatif.data;

	for(let i = 0; i < lescomposantesrgb.length; i += 4) {
		 
		lescomposantesrgb[i] = 255 - lescomposantesrgb[i]; // Rouge
		lescomposantesrgb[i + 1] = 255 - lescomposantesrgb[i+1]; // Vert
		lescomposantesrgb[i + 2] = 255 - lescomposantesrgb[i+2]; // Bleu
		// lescomposantesrgb[i+3]  composante alpha non modifiée
	}
	
	// copie le résultat 10px en-dessous de l'original
	ctx.putImageData( fruitsNegatif, 15, 30 + desFruits.height );
}

</script> 

</body>
</html>

Création de fruits

Dans l'exemple suivant, une image est chargée puis recopiée dans l'élément canvas après traitement sur ses pixels.

La boucle de traitement des pixels n'est pas écrite.

L'objectif est de créer une nouvelle sorte de pomme : une pomme de couleur bleue.

<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="utf-8">
<title>Canvas HTML5</title>
 
</head>
<body>

 
	<canvas id="fruits" width="350" height="350"></canvas>
	
<script>
var c = document.getElementById("fruits");
var ctx = c.getContext("2d");

var pomme = new Image();
pomme.src = "images/pomme.jpg";

pomme.onload = function(){

	ctx.drawImage(pomme, 15, 15);

	var nvpomme = ctx.getImageData( 15, 15, pomme.width, pomme.height);

	var lescomposantesrgb = nvpomme.data;

	 
	 // ECRIRE ICI LA BOUCLE DE TRAITEMENT DES PIXELS
	 //  POUR OBTENIR UNE POMME BLEUE
	
	// copie du résultat  sous  l'original :
	ctx.putImageData( nvpomme, 15, 30 + pomme.height );
}
</script> 
</body>
</html>

Un code possible

Le principe utilisé ici est d'inverser les composantes de rouge et de bleu dans toute l'image.

<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="utf-8">
<title>Canvas HTML5</title>
 
</head>
<body>

 
	<canvas id="fruits" width="350" height="350">
		 
	</canvas>
	
	
 
<script>


var c = document.getElementById("fruits");
var ctx = c.getContext("2d");

var pomme = new Image();
pomme.src = "images/pomme.jpg";

pomme.onload = function(){

	ctx.drawImage(pomme, 15, 15);

	var nvpomme = ctx.getImageData( 15, 15, pomme.width, pomme.height);

	var lescomposantesrgb = nvpomme.data;

	for(let i = 0; i < lescomposantesrgb.length; i += 4) {
		 
		var r = lescomposantesrgb[i];
		lescomposantesrgb[i] = lescomposantesrgb[i+2]; // Rouge
		lescomposantesrgb[i + 1] =  lescomposantesrgb[i+1]; // Vert
		lescomposantesrgb[i + 2] = r; // Bleu
		// lescomposantesrgb[i+3]  composante alpha non modifiée
	}
	
	// copie le résultat 10px en-dessous de l'original
	ctx.putImageData( nvpomme, 15, 30 + pomme.height );
}

</script> 

</body>
</html>