bitmap, canvas

Afficher les valeurs RGBa des pixels d'une photographie

On charge ci-dessous une photographie dans le canvas et on affiche les valeurs des premiers pixels.

<!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>

// récupération de l'élément canvas 
var c = document.getElementById("fruits");
// contexte 2d
var ctx = c.getContext("2d");

// création d'une variable image et définition de la source :
var desFruits = new Image();
desFruits.src = "images/fruit.jpg";


// fonction lancée après chargement de l'image :
desFruits.onload = function(){
   
    // on dessine l'image dans le canvas
    // coin supérieur gauche de l'image au point de coordonnées (15,15) du canvas 
	ctx.drawImage(desFruits, 15, 15);
 
	
	// récupération du tableau de données sur les pixels :
	var lescomposantesrgb = ctx.getImageData( 15, 15, desFruits.width, desFruits.height).data;
 
	 
    for(let i=0 ; i < 20 ; i+=4){
            document.write("<br>"); //passage à la ligne
            document.write(" Composante rouge du pixel " + i/4 + " : ");
            document.write(lescomposantesrgb[i] + "; ");  
            document.write(" Composante vert du pixel " + i/4 + " : ");
            document.write(lescomposantesrgb[i+1]+ "; ");  
            document.write(" Composante bleu du pixel " + i/4 + " : ");
            document.write(lescomposantesrgb[i+2]+ "; "); 
            document.write(" Composante alpha du pixel " + i/4 + " : ");
            document.write(lescomposantesrgb[i+3]); 
    }
    
    document.write("<p> ******************************</p>"); 
    
    for(let i=2920 ; i < 2960 ; i+=1){
            document.write("<br>"); //passage à la ligne
            document.write(" Composante rouge du pixel " + i + " : ");
            document.write(lescomposantesrgb[4*i] + "; ");  
            document.write(" Composante vert du pixel " + i + " : ");
            document.write(lescomposantesrgb[4*i+1]+ "; ");  
            document.write(" Composante bleu du pixel " + i + " : ");
            document.write(lescomposantesrgb[4*i+2]+ "; "); 
            document.write(" Composante alpha du pixel " + i + " : ");
            document.write(lescomposantesrgb[4*i+3]); 
    }
  
}

</script> 

</body>
</html>

Travailler sur les pixels d'une photographie

On charge ci-dessous une photographie dans le canvas puis on affiche une copie de l'image après transformation des composantes de rouge, vert et bleu.

<!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>

// récupération de l'élément canvas 
var c = document.getElementById("fruits");
// contexte 2d
var ctx = c.getContext("2d");

// création d'une variable image et définition de la source :
var desFruits = new Image();
desFruits.src = "images/fruit.jpg";


// fonction lancée après chargement de l'image :
desFruits.onload = function(){
   
    // on dessine l'image 
    //coin supérieur gauche en (15,15) :
	ctx.drawImage(desFruits, 15, 15);

	// nouvelle variable image pour le résultat après transformation
	var fruitsTristes = ctx.getImageData( 15, 15, desFruits.width, desFruits.height);
	
	// récupération du tableau de données sur les pixels :
	var lescomposantesrgb = fruitsTristes.data;


	// boucle de modification des composantes R,G,B.
	for(let i = 0; i < lescomposantesrgb.length; i += 4) {
		var b = 0.3 * lescomposantesrgb[i] + 0.6 * lescomposantesrgb[i + 1] + 0.1 * lescomposantesrgb[i + 2];
		lescomposantesrgb[i] = b; // Rouge
		lescomposantesrgb[i + 1] = b; // Vert
		lescomposantesrgb[i + 2] = b; // 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>