canvas

Image dans un canvas (2)

Ce fichier contient les valeurs RGBa des pixels d'une image sous forme d'un tableau js.

Écrire un script du même type que celui de l'exercice précédent permettant d'afficher l'image dans un canvas.

Mais largeur et hauteur ne vous sont pas données. A vous de les trouver.

Dimensions de l'image

On cherche ce que peuvent être les dimensions de l'image.

Pour cela, on récupère le nombre d'éléments de la liste, ce nombre est 4 fois le nombre de pixels N.

On essaie ensuite de décomposer N en produit de deux entiers.

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

<head>
<meta charset="utf-8">
<title>décomposition en produit</title>
<!-- on charge ci-dessous le fichier de données en 
indiquant le chemin du dossier dans lequel on l'a placé : -->
<script src="images/dataPrecieux.js"></script>
</head>
<body>
  
<p> Le nombre de pixels de l'image est égal à <span id="nbPixels"></span>.</p>
	
<p>  Les dimensions possibles de l'image : </p>
<p id="dimensions"></p>


<script>
// on récupère la longueur de la liste donnée dans le fichier
// on divise cette longueur par 4 puisque chaque pixel a une couleur codée par 4 entiers
// (composantes R, G, B, et alpha)
var N = tabPix.length/4;
// on affiche le nombre de pixels :
document.getElementById("nbPixels").innerHTML = N;

// On cherche maintenant à décomposer N en produit de 2 entiers :

var resultat = "";

 
	
	for( let a = 1; a <= N; a += 1)
	{
		b = N/a;
		if( b == Math.floor(b) )
		{
				resultat += a + "×" + b + "<br>";
		}
 
	}
	 
	
 
 
// affichage dans le body :
document.getElementById("dimensions").innerHTML = resultat;
 
  

</script> 

</body>
</html>

Affichage de l'image

Il reste à essayer les différents formats possibles jusquà obtenir l'image la plus plausible.

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

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


<!-- on charge ci-dessous le fichier de données en 
indiquant le chemin du dossier dans lequel on l'a placé : -->
<script src="images/dataPrecieux.js"></script>


</head>
<body>
  
	
	<canvas id="zoneImage" width="205" height="217">
	</canvas>
	
	
	
<script>

// on récupère l'élément canvas par son identifiant :
var c = document.getElementById("zoneImage");
// on précise que l'on va faire de la 2d 
// (l'élément canvas permet aussi de faire de la 3d)
var ctx= c.getContext("2d");

// on crée une image de 205px sur 217px que l'on nomme inconnue
var inconnue = ctx.createImageData( 205 , 217 );
 
 
 
for(let i = 0; i < tabPix.length; i += 1)
{
	inconnue.data[i] = tabPix[i];
}
 

//  on affiche maintenant l'image, coin supérieur gauche au point (0,0)
ctx.putImageData( inconnue  , 0 , 0 ); 

</script> 

</body>
</html>