Transformer des images dynamiquement avec Vae Soli!

image,transformation,channel,saturation,luminosité,hue,roue chromatique

Voilà un article qui inaugure une petite série sur le sujet. Il s'agit de vous montrer comment il est possible de transformer des photos en PHP grâce à Vae Soli!. Dans cette toute petite introduction, nous allons vous montrer comment transformer une image de telle sorte à ne lui garder que le canal des verts.

Application d'un channel

Voici l'image originale, une photo prise à Jauchelette qui montre des enfants s'amusant dans une petite piscine gonflable. Le code PHP se basant sur Vae Soli!, se charge de créer dynamiquement une image dans le canal des verts (c'est{-}à{-}}}dire au moment même de l'appel de la page … car l'image n'existe pas auparavant).

Et voici l'image transformée en appliquant un filtre sur le canal des 'verts'  :

Quel est le code qui permet de transformer l'image originale en image qui reste dans le canal des verts ? Il suffit de l'appel d'une seule fonction :

<?php   $szImgSrc  = "c:\\websites\\mon-site\\images\\jeu-eau.jpg";
        $szImgDest = "c:\\websites\\mon-site\\images\\jeu-eau-bis.jpg";
        IMG_GreenChannel( $szImgSrc,$szImgDest,95 );
?>

Le même type de code peut être utilisé pour créer des images dans le canal des bleus et dans le canal des rouges :

… ce qui correspond au code qui suit :

<?php   $szImgSrc  = "c:\\websites\\mon-site\\images\\jeu-eau.jpg";

        $szImgDest = "c:\\websites\\mon-site\\images\\jeu-eau-ter.jpg";
        IMG_BlueChannel( $szImgSrc,$szImgDest,95 );

        $szImgDest = "c:\\websites\\mon-site\\images\\jeu-eau-quater.jpg";
        IMG_RedChannel( $szImgSrc,$szImgDest,95 );
?>

Saturation

Il est également posible de travailler sur la saturation des couleurs d'une image et comme pour l'utilisation des channels, Vae Soli! fournit une fonction simple de traitement de l'image comme vous allez vous en rendre compte.

Voici l'image originale, une image de synthèse montrant un continent virtuel.

… et voici maintenant la même image avec une perte susbtantielle de saturation des couleurs la faisant quasiment tourner en niveaux de gris :

Maintenant, voyons à quoi ressemble la même image à pleine saturation :

Voici le code qui permet cette transformation :

<?php
        $szImageSrc     = FIL_ResolveRoot( "/images/transform/continent.jpg",$szRoot );
        $szImageDest    = FIL_ResolveRoot( "/images/transform/continent-high-saturation.jpg",$szRoot );

        if ( ! is_file( $szImageDest ) )
        {
            IMG_Saturation( $szImageSrc,$szImageDest,1.0,95 );
        }
?>

Négatif

Les fonctions de Vae Soli! permettent également de créer des images "négatif". Voici le négatif de l'image du continent de synthèse :

Et comme rien n'est secret, voici le code qui permet d'obtenir l'image en mode négatif :

<?php
        $szImageSrc     = FIL_ResolveRoot( "/images/transform/continent.jpg",$szRoot );
        $szImageDest    = FIL_ResolveRoot( "/images/transform/continent-negatif.jpg",$szRoot );

        if ( ! is_file( $szImageDest ) )
        {
            IMG_Negate( $szImageSrc,$szImageDest,95 );
        }
?>

Colorer une image par variation de la teinte

Une variation de teinte sur la roue chromatique est possible sur les images. Voici l'image originale, une composition personnelle sur le thème "Samouraï" :

Et la même image avec une variation de 75° sur la roue chromatique :

$szImageSrc     = FIL_ResolveRoot( "/images/transform/samourai.png",$szRoot );
$szImageDest    = FIL_ResolveRoot( "/images/transform/samourai-hue.png",$szRoot );

if ( ! is_file( $szImageDest ) )
{
    IMG_Hue( $szImageSrc,$szImageDest,75,90 );
}

Redimensionner une image

Vae Soli! fournit également de quoi redimensionner une image en respectant ses proportions de départ. C'est la fonction IMG_Resize() qui permet de s'adonner à ces petits jeux.

L'image du thème Samouraï, avec sa teinte modifiée et sa taille réduite de moitié :

$szImageSrc     = FIL_ResolveRoot( "/images/transform/samourai-hue.png",$szRoot );
$szImageDest    = FIL_ResolveRoot( "/images/transform/samourai-hue-050.png",$szRoot );

if ( ! is_file( $szImageDest ) )
{
    IMG_Resize( $szImageSrc,$szImageDest,2,90 ); /* 2 = taille réduite de moitié */
}

Creér des vignettes (thumbnails)

Lorsqu'il s'agit de rendre toute une série d'images dans les mêmes dimensions fixes, par exemple, une galerie de visages, on a besoin d'une fonction capable de créer des vignettes.

Nous avons conçu plusieurs photos que nous allons présenter sous forme de galerie de 6 vignettes. Chaque vignette est créée dynamiquement; lorsque vous cliquez sur une vignette, vous avez accès à l'image originale ce qui vous permet de mieux vous rendre compte de ce que permet la méthode Thumbnail() de la classe LSImage sur base d'images de tailles très différentes.

Le code suivant a permis de créer les vignettes :

$szImgSrc   = FIL_ResolveRoot( "/images/transform/menudier.jpg"      ,$szRoot );
$szImgDest  = FIL_ResolveRoot( "/images/transform/menudier-thumb.jpg",$szRoot );

$oImg = new LSImage( $szImgSrc );

if ( $oImg->Open() )
{
    /* 100 = largeur
       100 = hauteur
       false = ne pas forcer les dimensions (non utilisé à ce stade)
       0 = couleur d'arrière-plan (non utilisée à ce stade)
       95 = qualité de l'image résultat */
    $oImg->Thumbnail( 100,100,false,0,95 );
    $oImg->Set( $szImgDest );
    $oImg->Save( 'jpg',95 );
    $oImg->Close();
}

$szImgSrc   = FIL_ResolveRoot( "/images/transform/papillons.jpg"      ,$szRoot );
$szImgDest  = FIL_ResolveRoot( "/images/transform/papillons-thumb.jpg",$szRoot );

$oImg = new LSImage( $szImgSrc );

if ( $oImg->Open() )
{
    $oImg->Thumbnail( 100,100,false,0,95 );
    $oImg->Set( $szImgDest );
    $oImg->Save( 'jpg',95 );
    $oImg->Close();
}

$szImgSrc   = FIL_ResolveRoot( "/images/transform/lafayette.jpg"      ,$szRoot );
$szImgDest  = FIL_ResolveRoot( "/images/transform/lafayette-thumb.jpg",$szRoot );

$oImg = new LSImage( $szImgSrc );

if ( $oImg->Open() )
{
    $oImg->Thumbnail( 100,100,false,0,95 );
    $oImg->Set( $szImgDest );
    $oImg->Save( 'jpg',95 );
    $oImg->Close();
}

$szImgSrc   = FIL_ResolveRoot( "/images/transform/louvre.jpg"      ,$szRoot );
$szImgDest  = FIL_ResolveRoot( "/images/transform/louvre-thumb.jpg",$szRoot );

$oImg = new LSImage( $szImgSrc );

if ( $oImg->Open() )
{
    $oImg->Thumbnail( 100,100,false,0,95 );
    $oImg->Set( $szImgDest );
    $oImg->Save( 'jpg',95 );
    $oImg->Close();
}

$szImgSrc   = FIL_ResolveRoot( "/images/transform/luxury.jpg"      ,$szRoot );
$szImgDest  = FIL_ResolveRoot( "/images/transform/luxury-thumb.jpg",$szRoot );

$oImg = new LSImage( $szImgSrc );

if ( $oImg->Open() )
{
    $oImg->Thumbnail( 100,100,false,0,95 );
    $oImg->Set( $szImgDest );
    $oImg->Save( 'jpg',95 );
    $oImg->Close();
}

$szImgSrc   = FIL_ResolveRoot( "/images/transform/roue.jpg"      ,$szRoot );
$szImgDest  = FIL_ResolveRoot( "/images/transform/roue-thumb.jpg",$szRoot );

$oImg = new LSImage( $szImgSrc );

if ( $oImg->Open() )
{
    $oImg->Thumbnail( 100,100,false,0,95 );
    $oImg->Set( $szImgDest );
    $oImg->Save( 'jpg',95 );
    $oImg->Close();
}

La suite au prochain numéro !

Nos autres articles