bitmap

Tête en bas

La boucle de traitement des pixels est à écrire.

Il s'agit de retourner la photographie en agissant sur les pixels (le haut de la photo devient le bas et vice-versa).

On obtiendra donc un résultat comme le suivant :
tête en bas

<!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 h = desFruits.height;
	var w = desFruits.width;

	var fruits = ctx.getImageData( 15, 15, w, h);
	var lescomposantesrgb = fruits.data;
	
	var fruits2 = ctx.getImageData( 0, 0, w, h);
	var lescomposantesrgb2 = fruits2.data;
	
	 // ECRIRE ICI LA BOUCLE DE TRAITEMENT DES PIXELS
	 // POUR RETOURNER LA PHOTO TETE EN BAS

	 
	
	// copie le résultat 10px en-dessous de l'original
	ctx.putImageData( fruits2, 15, 30 + h );
}

</script>	
 

</body>
</html>

Une aide

En fixant y à un numéro de ligne de l'image (y peut donc prendre les valeurs entières de 0 à desFruits.height-1), les pixels de la ligne y sont numérotés de 0 + y * desFruits.width à (desFruits.width-1) + y * desFruits.width.

En posant h = desFruits.height et w = desFruits.width, on parcourt les pixels dans l'ordre (ligne du haut de gauche à droite, ligne immédiatement en-dessous de gauche à droite...) avec une double boucle telle que :


for(let y = 0; y < h; y+=1)
	{
		for(let x = 0; x < w; x+=1)
		{
		 	var numeroPixel = x + y * w;
		 	
		 	TRAITEMENT A EFFECTUER

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 h = desFruits.height;
	var w = desFruits.width;

	var fruits = ctx.getImageData( 15, 15, w, h);
	var lescomposantesrgb = fruits.data;
	
	var fruits2 = ctx.getImageData( 0, 0, w, h);
	var lescomposantesrgb2 = fruits2.data;
	
	for(let y = 0; y < h; y+=1)
	{
		for(let x = 0; x < w; x+=1)
		{
		 	var numeroPixel = x + y * w;
		 	r = lescomposantesrgb[4*numeroPixel];
		 	v = lescomposantesrgb[4*numeroPixel+1];
		 	b = lescomposantesrgb[4*numeroPixel+2];
		 	alpha = lescomposantesrgb[4*numeroPixel+3];
		 	
		 	var nvnumeroPixel = x + (h-y-1) * w;
		 	lescomposantesrgb2[4*nvnumeroPixel] = r;
		 	lescomposantesrgb2[4*nvnumeroPixel+1] = v;
		 	lescomposantesrgb2[4*nvnumeroPixel+2] = b;
		 	lescomposantesrgb2[4*nvnumeroPixel+3] = alpha;
		 	
			
		}
	}

	 
	
	// copie le résultat 10px en-dessous de l'original
	ctx.putImageData( fruits2, 15, 30 + h );
}

</script> 

</body>
</html>

Gauche, droite

La boucle de traitement des pixels est à écrire.

Il s'agit maintenant d'inverser la gauche et la droite.

On obtiendra donc un résultat comme le suivant :
inversion gauche droite

<!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 h = desFruits.height;
	var w = desFruits.width;

	var fruits = ctx.getImageData( 15, 15, w, h);
	var lescomposantesrgb = fruits.data;
	
	var fruits2 = ctx.getImageData( 0, 0, w, h);
	var lescomposantesrgb2 = fruits2.data;
	
	 // ECRIRE ICI LA BOUCLE DE TRAITEMENT DES PIXELS
	 // POUR RETOURNER LA PHOTO GAUCHE <-> DROITE

	 
	
	// copie le résultat 10px en-dessous de l'original
	ctx.putImageData( fruits2, 15, 30 + h );
}

</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 h = desFruits.height;
	var w = desFruits.width;

	var fruits = ctx.getImageData( 15, 15, w, h);
	var lescomposantesrgb = fruits.data;
	
	var fruits2 = ctx.getImageData( 0, 0, w, h);
	var lescomposantesrgb2 = fruits2.data;
	
	for(let y = 0; y < h; y+=1)
	{
		for(let x = 0; x < w; x+=1)
		{
		 	var numeroPixel = x + y * w;
		 	r = lescomposantesrgb[4*numeroPixel];
		 	v = lescomposantesrgb[4*numeroPixel+1];
		 	b = lescomposantesrgb[4*numeroPixel+2];
		 	alpha = lescomposantesrgb[4*numeroPixel+3];
		 	
		 	var nvnumeroPixel = (w-x-1) + y * w;
		 	lescomposantesrgb2[4*nvnumeroPixel] = r;
		 	lescomposantesrgb2[4*nvnumeroPixel+1] = v;
		 	lescomposantesrgb2[4*nvnumeroPixel+2] = b;
		 	lescomposantesrgb2[4*nvnumeroPixel+3] = alpha;
		 	
			
		}
	}

	 
	
	// copie le résultat 10px en-dessous de l'original
	ctx.putImageData( fruits2, 15, 30 + h );
}

</script> 

</body>
</html>

Largeur, hauteur

La boucle de traitement des pixels est à écrire.

Il s'agit maintenant d'inverser la largeur et la hauteur.

On obtiendra donc un résultat comme le suivant :
inversion largeur hauteur

<!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 h = desFruits.height;
	var w = desFruits.width;

	var fruits = ctx.getImageData( 15, 15, w, h);
	var lescomposantesrgb = fruits.data;
	
	var fruits2 = ctx.getImageData( 0, 0, w, h);
	var lescomposantesrgb2 = fruits2.data;
	
	 // ECRIRE ICI LA BOUCLE DE TRAITEMENT DES PIXELS
	 // POUR RETOURNER LA PHOTO LARGEUR <-> HAUTEUR

	 
	
	// copie le résultat 10px en-dessous de l'original
	ctx.putImageData( fruits2, 15, 30 + h );
}

</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 h = desFruits.height;
	var w = desFruits.width;

	var fruits = ctx.getImageData( 15, 15, w, h);
	var lescomposantesrgb = fruits.data;
	
	var fruits2 = ctx.getImageData( 0, 0, h,w); 
	var lescomposantesrgb2 = fruits2.data;
	
	 
	
	for(let y = 0; y < h; y+=1)
	{
		for(let x = 0; x < w; x+=1)
		{
		 	var numeroPixel = x + y * w;
		 	r = lescomposantesrgb[4*numeroPixel];
		 	v = lescomposantesrgb[4*numeroPixel+1];
		 	b = lescomposantesrgb[4*numeroPixel+2];
		 	alpha = lescomposantesrgb[4*numeroPixel+3];
		 	
		 	var nvnumeroPixel = y + x * h;
		 	lescomposantesrgb2[4*nvnumeroPixel] = r;
		 	lescomposantesrgb2[4*nvnumeroPixel+1] = v;
		 	lescomposantesrgb2[4*nvnumeroPixel+2] = b;
		 	lescomposantesrgb2[4*nvnumeroPixel+3] = alpha;
		 	
			
		}
	}

	 
	
	// copie le résultat 10px en-dessous de l'original
	ctx.putImageData( fruits2, 15, 30 + h );
}

</script> 

</body>
</html>