[Paris-Beyrouth] Changer le format d'une image et supprimer la transparence (SPIP 1.9 et GD2)

Sites

Collaborations

Techniques SPIP

Nos compétences

Identité visuelle

Packaging

Couvertures

Maquettes

CHANGER LE FORMAT D'UNE IMAGE ET SUPPRIMER LA TRANSPARENCE

Quand habibi n’est pas là (Google Vidéo)

Une vidéo suédoise dans vos articles (DailyMotion)

Pourquoi utiliser les filtres graphiques de SPIP ?

Changer le format d’une image et supprimer la transparence

Étendre la couche alpha

Une fonction pour appliquer une série de filtres

Des titres en relief

Techniques SPIP

Vous trouverez ici des trucs et astuces destinés aux développeurs de sites sous SPIP.

La majorité de ces trucs est consacrée aux filtres graphiques introduits dans SPIP 1.9. Il y a là en effet un vaste champ d’expérimentation pour les webmestres et les graphistes.

Chaque truc est suivi d’un forum auquel nous vous invitons à participer.

N.B. La présence de ces trucs et astuces sur notre site professionnel est destinée à faire connaître notre activité de création de sites sous SPIP. Vous pouvez librement utiliser les morceaux de code fournis ici dans vos propres squelettes. Vous pouvez reprendre ces exemples sur votre site ou dans les forums d’un autre site ; dans ce cas, nous vous demandons simplement d’avoir la courtoisie de référencer la page d’où est tiré le code repris.

Quelques exemples de notre travail

[SPIP 1.9 et GD2] Voici un filtre technique qui, dans son usage le plus immédiat, ne provoque aucun effet graphique : il se contente de supprimer la transparence d’une image et de sauvegarder l’image dans un format déterminé.

Nous en aurons certainement une utilité nettement plus créative par la suite, mais pour l’instant, contentons-nous de l’utiliser pour aplatir une image et, surtout, la convertir dans un certain format graphique.

Notez bien : ce filtre est désormais inclus en standard dans SPIP 1.9. Vous n’avez donc pas besoin de le recopier dans votre fichier mes_fonctions.php.

Voici notre filtre :

function image_aplatir($im, $format='jpg', $coul='000000')
{
        $image = valeurs_image_trans($im, "aplatir-$coul", $format);
        if (!$image) return("");
 
        include_ecrire("filtres");
        $couleurs = couleur_hex_to_dec($coul);
        $dr= $couleurs["red"];
        $dv= $couleurs["green"];
        $db= $couleurs["blue"];
        
        $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($x_i, $y_i);
                @imagealphablending($im_, false);
                @imagesavealpha($im_,true);
                $color_t = ImageColorAllocateAlpha( $im_, $dr, $dv, $db , 0 );
                imagefill ($im_, 0, 0, $color_t);
 
                $dist = abs($trait);
                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;
                                
                                if ($a == 1) { // Limiter calculs
                                        $r = $r;
                                        $g = $g;
                                        $b = $b;
                                } else {
                                        $r = round($a * $r + $dr * (1-$a));
                                        $g = round($a * $g + $dv * (1-$a));
                                        $b = round($a * $b + $db * (1-$a));
                                }
                                                                
                                $color = ImageColorAllocateAlpha( $im_, $r, $g, $b , 0 );
                                imagesetpixel ($im_, $x, $y, $color);   
                        }
                }
                $image["fonction_image"]($im_, "$dest");
        }
 
        $class = $image["class"];
        if (strlen($class) > 1) $tags=" class='$class'";
        $tags = "$tags alt='".$image["alt"]."'";
        $style = $image["style"];
        
        return "<img src='$dest'$tags />";
}

Télécharger

On aurait pu encore limiter les calculs, dans le cas des fichiers JPEG, puisque ceux-ci n’étant jamais transparents, il suffisait de faire une conversion de fichier sans se poser de questions (ici, on parcourt tout de même l’image pixel par pixel pour « fusionner » les pixels semi-transparents et la couleur de fond choisie). Mais, en réalité, ce filtre n’est pas destiné à aux images qui sont déjà en JPEG, puisque justement c’est le meilleur compromis entre le poids et la qualité pour des photographies Web.

Utilisation simple et directe pour l’instant : convertir des fichiers PNG 24 en fichiers GIF ou en fichiers JPEG.
Appliqué à des photographies, on réduit énormément le poids des fichiers (PNG 24 est un format excessivement lourd).
Appliqué à des images typographiques, on peut par exemple supprimer la transparence, ce qui dans certains cas facilitera l’utilisation (par exemple en tant qu’image de fond d’une classe CSS). En revanche, sur les images typographiques, l’argument du poids du fichier n’est pas aussi pertinent, le PNG 24 compressant assez bien les aplats de couleurs.

[(#TITRE
     |image_typo{police=stencil.ttf,couleur=000000,taille=40})]
[(#TITRE
     |image_typo{police=stencil.ttf,couleur=000000,taille=40}
     |image_aplatir{gif,ff0000})]

Télécharger

On a donc notre image typographiques d’origine, fichier PNG avec transparence :

on obtient un fichier GIF, non transparent, dont on a fixé la couleur du fond :

N.B. Ne convertissez pas des images typographiques en JPEG : le JPEG provoque dans les images comportant d’importants aplats de couleurs des artefacts de compression hideux.

Juin 2006

Changer le format d’une image et supprimer la transparence

Franz

Salut,

La manière dont le code source des filtres est affiché est vraiment très très jolie (c’est disponible quelque part le code pour faire ça ?) mais présente quand même l’inconvénient, certes mineur, que le copier-coller est moins facile à pratiquer qu’avec un bête textarea tel que SPIP en fabrique un en standard pour les balises <cadre></cadre>.

Peut-être mettre aussi le code des filtres dans un fichier texte en en pièce jointe téléchargeable facilitterait-il la vie des visiteurs ?

Félicitations pour le site et pour toute l’inventivité qui y est déployée,

Juin 2006

Changer le format d’une image et supprimer la transparence

ARNO* (arnaud chez paris-beyrouth.net)

Voilà, j’ai modifié le plugin d’affichage du code, et désormais un lien « Télécharger » propose, à la fin du script, de récupérer un fichier le contenant. Ca devrait être plus pratique.

Le plugin qui permet de coloriser ainsi le code (et, dans le cas de PHP, d’ajouter des liens hypertextes vers les définitions des fonctions dans la doc officielle) est « coloration_code ».

Septembre 2006

Changer le format d’une image et supprimer la transparence

Ce serait une piste peut-être pour fabriquer des favicons systématiquement pour les sites sous SPIP ça non ?

[#LOGO_SITE_SPIP|favicon)] avec un 16*16 ?

Votre message :