bitmap

Réduction

On cherche ici à réduire une image.

L'idée utilisée ici est de ne garder qu'un pixel sur quatre.

On découpe donc l'image en carrés de quatre pixels (carré 2 sur 2). Et un seul des 4 pixels est conservé.

Appliquer l'idée de ne garder qu'un pixel sur quatre (on conservera par exemple le pixel du coin supérieur gauche de chaque carré) sans autre traitement.
Recommencer mais le pixel restant aura pour composantes R la moyenne des composantes R des 4 pixels de son carré, idem pour la composante G et la composante B.

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

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

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

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

tigre.onload = function(){

	ctx.drawImage(tigre, 15, 15);
	
	var h = tigre.height;
	var w = tigre.width;

	var tigreInitial = ctx.getImageData( 15, 15, w, h);
	var lescomposantesrgb = tigreInitial.data;
	
	var hr = h/2;
	var wr = w/2;
	
	var tigreReduit = ctx.getImageData( 50+w, 15, wr, hr);
	var lescomposantesrgbreduc = tigreReduit.data;
	
	// boucle à écrire 

	 
	
	// copie le résultat  à côté de l'original
	ctx.putImageData( tigreReduit, 50+w, 15 );
}

</script>	
 

</body>
</html>

Un sur quatre, sans autre traitement.

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

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

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

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

tigre.onload = function(){

	ctx.drawImage(tigre, 15, 15);
	
	var h = tigre.height;
	var w = tigre.width;

	var tigreInitial = ctx.getImageData( 15, 15, w, h);
	var lescomposantesrgb = tigreInitial.data;
	
	var hr = h/2;
	var wr = w/2;
	
	var tigreReduit = ctx.getImageData( 0, 0, wr, hr);
	var lescomposantesrgbreduc = tigreReduit.data;
	
	 for(let y = 0; y < h; y+=2)
	{
		for(let x = 0; x < w; x+=2)
		{
			// les 4 pixels du carré
			// coin supérieur gauche en (x,y)
		 	var pix1 = x + y * w;
		 	var pix2 = (x+1) + y*w;
		 	var pix3 = x + (y+1) * w;
		 	var pix4 = (x+1) + (y+1)*w;
		 	
		 	  
		 	var pixelImageReduite = x/2 + y/2 * wr;
		 	lescomposantesrgbreduc[4*pixelImageReduite] = lescomposantesrgb[4*pix1];
		 	lescomposantesrgbreduc[4*pixelImageReduite+1] = lescomposantesrgb[4*pix1+1];
		 	lescomposantesrgbreduc[4*pixelImageReduite+2] = lescomposantesrgb[4*pix1+2];
		 	lescomposantesrgbreduc[4*pixelImageReduite+3] = lescomposantesrgb[4*pix1+3];
		 	
			
		}
	}

	 
	
	// copie le résultat  à côté de l'original
	ctx.putImageData( tigreReduit, 50+w, 15 );
}

</script>	
 

</body>
</html>

Un sur quatre, avec moyenne

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

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

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

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


function moyenne(a,b,c,d)
{
	return Math.floor( (a + b + c + d) / 4 );
}

tigre.onload = function(){

	ctx.drawImage(tigre, 15, 15);
	
	var h = tigre.height;
	var w = tigre.width;

	var tigreInitial = ctx.getImageData( 15, 15, w, h);
	var cprgb = tigreInitial.data;
	
	var hr = h/2;
	var wr = w/2;
	
	var tigreReduit = ctx.getImageData( 0, 0, wr, hr);
	var lescomposantesrgbreduc = tigreReduit.data;
	
	 for(let y = 0; y < h; y+=2)
	{
		for(let x = 0; x < w; x+=2)
		{
			// les 4 pixels du carré
			// coin supérieur gauche en (x,y)
		 	var pix1 = x + y * w;
		 	var pix2 = (x+1) + y*w;
		 	var pix3 = x + (y+1) * w;
		 	var pix4 = (x+1) + (y+1)*w;
		 	
		 	  
		 	var pixelImageReduite = x/2 + y/2 * wr;
		 	lescomposantesrgbreduc[4*pixelImageReduite] = moyenne(cprgb[4*pix1], cprgb[4*pix2],  cprgb[4*pix3], cprgb[4*pix4]);
		 	lescomposantesrgbreduc[4*pixelImageReduite+1] = moyenne(cprgb[4*pix1+1], cprgb[4*pix2+1],  cprgb[4*pix3+1], cprgb[4*pix4+1]) ;
		 	lescomposantesrgbreduc[4*pixelImageReduite+2] = moyenne(cprgb[4*pix1+2], cprgb[4*pix2+2],  cprgb[4*pix3+2], cprgb[4*pix4+2]) ;
		 	lescomposantesrgbreduc[4*pixelImageReduite+3] = moyenne(cprgb[4*pix1+3], cprgb[4*pix2+3],  cprgb[4*pix3+3], cprgb[4*pix4+3]) ;
		 	
			
		}
	}

	 
	
	// copie le résultat  à côté de l'original
	ctx.putImageData( tigreReduit, 50+w, 15 );
}

</script>	
 

</body>
</html>

La transformation du photomaton (étape 1)

On reprend l'idée de l'exercice précédent qui consistait à ne garder qu'un pixel sur quatre.

Mais cette fois, on constitue 4 petites images à partir des pixels du carré initial : une image qui occupe le coin nord-ouest constituée des pixels des carrés nord-ouest, idem pour l'image nord-est et les images sud-ouest, sud-est.

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

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

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

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

A.onload = function(){

	ctx.drawImage(A, 15, 15);
	
	var h = A.height;
	var w = A.width;

	var AA = ctx.getImageData( 15, 15, w, h);
	var cprgb = AA.data;
	
	var hr = h/2;
	var wr = w/2;
	
	var BB = ctx.getImageData( 50+w, 15, w, h);
	var cprgbBB = BB.data;
	
	// boucle à écrire 

	 
	
	// copie le résultat  à côté de l'original
	ctx.putImageData( BB, 50+w, 15 );
}

</script>	
 

</body>
</html>

Un code possible :

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

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

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

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

image.onload = function(){

	ctx.drawImage(image, 15, 15);
	
	var h = image.height;
	var w = image.width;

	var A = ctx.getImageData( 15, 15, w, h);
	var cprgbA = A.data;
	
	var hr = h/2;
	var wr = w/2;
	
	var B = ctx.getImageData( 50+w, 15, w, h);
	var cprgbB = B.data;
	
	 for(let y = 0; y < h; y+=2)
	{
		for(let x = 0; x < w; x+=2)
		{
          	
			// les 4 pixels du carré
			// coin supérieur gauche en (x,y)
		 	var pix1 = x + y * w;
		 	var pix2 = (x+1) + y*w;
		 	var pix3 = x + (y+1) * w;
		 	var pix4 = (x+1) + (y+1)*w;
		 	
		 	  
          	 
              // partie nord-ouest
              var pno = x/2  + y/2  * w ;
              cprgbB[4*pno] = cprgbA[4*pix1];
              cprgbB[4*pno+1] = cprgbA[4*pix1+1];
              cprgbB[4*pno+2] = cprgbA[4*pix1+2];
              cprgbB[4*pno+3] = cprgbA[4*pix1+3];
             
		 	
             
		 	// partie nord-est
		 	var pne = (wr + x/2)  + y/2  * w    ;
		 	cprgbB[4*pne] = cprgbA[4*pix2];
		 	cprgbB[4*pne+1] = cprgbA[4*pix2+1];
		 	cprgbB[4*pne+2] = cprgbA[4*pix2+2];
		 	cprgbB[4*pne+3] = cprgbA[4*pix2+3];
            
		 	
          	 
		 	// partie sud-ouest
		 	var pso = x/2  + y/2  *  w + hr*w ;
		 	cprgbB[4*pso] = cprgbA[4*pix3];
		 	cprgbB[4*pso+1] = cprgbA[4*pix3+1];
		 	cprgbB[4*pso+2] = cprgbA[4*pix3+2];
		 	cprgbB[4*pso+3] = cprgbA[4*pix3+3];
              
		 	// partie sud-est
		 	var pse = (x/2+wr) + y/2  * w + hr*w ;
		 	cprgbB[4*pse] = cprgbA[4*pix4];
		 	cprgbB[4*pse+1] = cprgbA[4*pix4+1];
		 	cprgbB[4*pse+2] = cprgbA[4*pix4+2];
		 	cprgbB[4*pse+3] = cprgbA[4*pix4+3];
            
			
		}
	}

	 
	
	// copie le résultat  à côté de l'original
	ctx.putImageData( B, 50+w, 15 );
}

</script>	
 

</body>
</html>

Pour comprendre le titre de l'exercice, vous pouvez consulter cette page ou cette page.