Transformer une image jpg en image html

Transformer une image jpg en image html, deuxième partie

Pour créer notre image html, il nous faut :
- récupérer la couleur de tous les pixels de l'image de base (jpg dans notre cas)
- créer un fichier html contenant tous les de la bonne couleur, positionnés au bon endroit.

Le PHP, qui sait analyser les images et générer des fichiers, rend l'opération particulièrement facile.

Récupérer la couleur des pixels
Opération facile avec la bibliothèque gd de php :

$im = imagecreatefromjpeg("coquelicot.jpg");
$rgb = imagecolorat($im, $x, $y);
$r = ($rgb >> 16) & 0xFF;
$g = ($rgb >> 8) & 0xFF;
$b = $rgb & 0xFF;

$r, $g, $b sont les composants rouge, vert et bleu de la couleur du point de coordonnnées $x et $y (en pixels) de notre image coquelicot.jpg.
On peut les utiliser dans notre page html en écrivant ;
echo "";

Pour gagner quelques octets, on peut aussi transformer le rgb en hexadécimal :

function hexacol($coulrgb)
 {
 foreach($coulrgb as $value)
 {
 $coul = dechex($value);
 $coul=substr("00".$coul,strlen($coul));
 $coulhex.=$coul;
 }
 return "#".$coulhex;
 }
echo " ";

Balayer les pixels

Il nous faut répéter l'opération de récupération de couleur et création de coloré pour tous les pixels de notre image.
Mais d'abord, il faut choisir la définition de notre image html.
C'est le principal inconvénient de la technique, le fichier devient vite lourd et long (voire impossible) à afficher si le débit internet et/ou la capacité de calcul sont insuffisants.
Une image de 10 000 points s'affiche en quelques secondes, au delà de 25 000, ce peut être très long.
Réservons donc cela à des images de petite taille (à l'affichage) et de faible résolution.

Commençons par choisir le nombre de pixels d'affichage de notre image, par exemple $nbpixels = 10 000, puis les dimensions à l'écran, par exemple $hauteurcibl = 100 pixels (pixels écran) de haut.
Pour ne pas altérer les proportons de l'image, on détermine d'abord sa largeur, puis les dimensions des pixels de notre image :

On récupère les dimensions réelles de l'image jpg :
$taille=getimagesize($adrimg);
l'image mesure $taille[1] pixels de haut et $taille[0] pixels de large.
Notre image, de hauteur $hauteurcibl, sera donc à l'échelle $ech=$hauteurcibl/$taille[1];
Et elle aura à l'écran pour largeur $largeurcibl=$ech*$taille[0];
Soit un nombre de pixels écran de $hauteurcibl*$largeurcibl
Sachant que l'on souhaite limiter la résolution à $nbpixels (10 000 points), on en déduit la taille de notre pixel image (en nombre de pixels écran) :
$taillepixel=sqrt($hauteurcibl*$largeurcibl/$nbpixels);
Qu'on arrondit pour ne pas trainer de nombreuses décimales :
$taillepixel=round(sqrt($hauteurcibl*$largeurcibl/$nbpixels),2);
Remarque : les css acceptent des mesures décimales, donc des fractions de pixel écran. La plupart des navigateurs les traduisent correctement.

Partant de là, il suffit de balayer les pixels de gauche à droite et de haut en bas pour recréer notre image :

for($y=0;$y<=$hauteurcibl-$taillepixel/2;$y=$y+$taillepixel)
 {
 $ysource=($y+$taillepixel/2)/$ech;
 for($x=0;$x<=$largeurcibl-$taillepixel/2;$x=$x+$taillepixel)
 {
 $xsource=($x+$taillepixel/2)/$ech;
 $rgb = imagecolorat($im, $xsource, $ysource);
 $r[$x][$y] = ($rgb >> 16) & 0xFF;
 $g[$x][$y] = ($rgb >> 8) & 0xFF;
 $b[$x][$y] = $rgb & 0xFF;
 echo " ";
 }
 echo "\n\n ";
 }

cliquez ici pour voir le résultat (image html et image jpg côte à côte) avec comme paramètres :
$hauteurcibl=100;
$nbpixels=10000;
$adrimg='myosotis.jpg';

Et cliquez ici pour voir le code correspondant.

Plus d'exemples (avec paramétrage de la résolution et des dimensions d'affichage) en cliquant ici

Et pour convertir vos propres images jpg en images html, utilisez le convertisseur en ligne (cliquez).