Afficher l'histogramme d'une image

[SPIP 1.9 et GD2] Toujours à la recherche d’applications inédites des filtres de SPIP, je vous propose aujourd’hui de franchir une nouvelle étape : un filtre qui ne sert rigoureusement à rien !

À rien pour traiter une image, certes, mais dans une galerie de photos, ça peut produire un petit effet assez pro... Et il n’est pas impossible que, par la suite, nous trouvions un usage à la méthode développée ici¹.

L’idée est d’extraire d’une photographie les informations de couleur de tous ses pixels et de les afficher dans un graphique synthétique, que l’on nomme habituellement un histogramme. Partons de l’image suivante :

elle nous donne l’histogramme suivant :

Le graphique se lit ainsi :
— en fond d’image, la courbe grise indique la répartition des niveaux de gris ;
— par dessus, trois courbes colorées indiquent les répartitions de rouge, vert et bleu ;
— pour chaque courbe, l’axe horizontal de gauche à droite parcourt les intensités de 0 à 255 ; pour le gris, par exemple, 0 est le noir, 255 est le blanc ; et verticalement, la « hauteur » de la courbe indique la densité de ce niveau de couleur, c’est-à-dire le nombre de pixels qui correspondent à ce niveau.

Par exemple, ici, pour le gris comme pour les trois composantes, on a des pics d’intensité situés aux alentours de l’intensité 200 ; ce qui signifie qu’un grand nombre de pixels ont une couleur proche du gris 78% (relativement clair, donc). On constate également qu’il n’y a quasiment pas de pixels avec des intensités supérieures à 220 ; ce qui signifie qu’il n’y a quasiment pas de pixels très clairs dans l’image (l’image n’a pas de zones très claires ou blanches).

Voici notre filtre image_histo :

function image_histo($im) {

$image = valeurs_image_trans($im, "courbes", "gif");
if (!$image) return("");

$x_i = $image["largeur"];
$y_i = $image["hauteur"];
$im = $image["fichier"];
$dest = $image["fichier_dest"];
$creer = $image["creer"];

if ($creer) {
$im = $image["fonction_imagecreatefrom"]($im);
$im_ = imagecreatetruecolor(258, 130);
@imagealphablending($im_, false);
@imagesavealpha($im_,true);
$color_t = ImageColorAllocateAlpha( $im_, 255, 255, 255 , 0 );
imagefill ($im_, 0, 0, $color_t);
$col_poly = imagecolorallocate($im_,0,0,0);
imagepolygon($im_, array ( 0, 0, 257, 0, 257, 129, 0,129 ), 4, $col_poly);

for ($x = 0; $x < $x_i; $x++) {
for ($y=0; $y < $y_i; $y++) {

$rgb = ImageColorAt($im, $x, $y);
$a = ($rgb >> 24) & 0xFF;
$r = ($rgb >> 16) & 0xFF;
$g = ($rgb >> 8) & 0xFF;
$b = $rgb & 0xFF;

$a = (127-$a) / 127;
$a=1;

$gris = round($a*($r+$g+$b) / 3);
$r = round($a*$r);
$g = round($a*$g);
$b = round($a*$b);

$val_gris[$gris] ++;
$val_r[$r] ++;
$val_g[$g] ++;
$val_b[$b] ++;
} 
}
$max = max( max($val_gris), max($val_r), max($val_g), max($val_b));
$rapport = (127/$max);

$gris = imagecolorallocate($im_, 160, 160, 160);
for ($i = 0; $i < 256; $i++) {
$val = 127 - round(max(0,$val_gris[$i]) * $rapport);			imageline ($im_, $i+1, 128, $i+1, $val+1, $gris);
}
$bleu = imagecolorallocate($im_, 0, 0, 255);
for ($i = 0; $i < 256; $i++) {
$val = 127 - round(max(0,$val_b[$i]) * $rapport);
if ($i==0) imagesetpixel ($im_, $i+1, $val+1, $bleu);
else imageline($im_, $i, $val_old+1, $i+1, $val+1, $bleu);
$val_old = $val;
}
$green = imagecolorallocate($im_, 0, 255, 0);
for ($i = 0; $i < 256; $i++) {
$val = 127 - round(max(0,$val_g[$i]) * $rapport);
if ($i==0) imagesetpixel ($im_, $i+1, $val+1, $green);
else imageline($im_, $i, $val_old+1, $i+1, $val+1, $green);
$val_old = $val;
}
$rouge = imagecolorallocate($im_, 255, 0, 0);
for ($i = 0; $i < 256; $i++) {
$val = 127 - round(max(0,$val_r[$i]) * $rapport);
if ($i==0) imagesetpixel ($im_, $i+1, $val+1, $rouge);
else imageline($im_, $i, $val_old+1, $i+1, $val+1, $rouge);
$val_old = $val;
}

$image["fonction_image"]($im_, "$dest");
imagedestroy($im_);
imagedestroy($im);
}

return "<img src='$dest' style='width: 258px; height: 130px;' />";
}

La première partie détermine le nom et gère le système de cache pour l’image résultante. La seule particularité ici est que l’on travaille avec une image qui ne découle pas directement, pour ses dimensions, de l’image d’origine. C’est un graphique de taille fixe que l’on créée.

La double boucle, habituelle, parcourt l’image pixel par pixel :

for ($x = 0; $x < $x_i; $x++) {
for ($y=0; $y < $y_i; $y++) {

$rgb = ImageColorAt($im, $x, $y);
$a = ($rgb >> 24) & 0xFF;
$r = ($rgb >> 16) & 0xFF;
$g = ($rgb >> 8) & 0xFF;
$b = $rgb & 0xFF;

$a = (127-$a) / 127;
$a=1;

$gris = round($a*($r+$g+$b) / 3);
$r = round($a*$r);
$g = round($a*$g);
$b = round($a*$b);

$val_gris[$gris] ++;
$val_r[$r] ++;
$val_g[$g] ++;
$val_b[$b] ++;
} 
}
$max = max( max($val_gris), max($val_r), max($val_g), max($val_b));
$rapport = (127/$max);

On stocke les informations d’intensité dans des tableaux ($val_gris, $val_r...). À la fin de la double boucle, on détermine la valeur maximale de tous ces tableaux, de façon à pouvoir, ensuite, dessiner la valeur maximale à 127 pixels du bas de l’image.

C’est dans un deuxième temps, dans quatre boucles successives, de 0 à 255, que l’on parcourt les niveaux d’intensité pour dessiner nos quatre courbes.

Voici un autre exemple :

qui donne :

¹Par exemple : Corriger les niveaux des images.