Image vectorise

Filtre |extraire_palette_couleurs

Le premier filtre fourni par le plugin n’est pas directement un filtre image, mais un filtre qui permet d’extraire une palette de couleurs d’une image, par ordre d’importance dans l’image.

L’extraction de la palette se fait par la partitionnement en K-moyennes, inspiré de http://charlesleifer.com/blog/using-python-and-k-means-to-find-the-dominant-colors-in-images/

Syntaxe

|extraire_palette_couleurs{nb_couls[,largeur_vignette]}

Les arguments du filtre sont :

• le nombre de couleur de la palette (par défaut 3)
• la largeur de la vignette utilisée pour faire le partitionnement : l’algorithme est potentiellement lourd si on l’utilise sur une grosse image, et un bon compromis est donc de l’utiliser sur une vignette (par défaut d’une largeur de 32px)

Exemple

#SET{palette,#FICHIER|extraire_palette_couleurs{5}}
<BOUCLE_palette(POUR){tableau #GET{palette}}>
  <div style="background-color: #VALEUR; display: inline-block; width: 30px;height: 15px;"></div>
</BOUCLE_palette>

Sur un échantillon d’images :

Filtre |image_filtrer_couleur

Le second filtre est un filtre image, mais qui produit toujours une image bitmap (Il va servir à la vectorisation dans les filtres suivants).

Le but de ce filtre est de pouvoir filtrer une couleur sur une image, en récupérant au choix

• un masque en noir et blanc dont les pixels de la couleur cherchée seront noirs et les pixels très éloignés de la couleur seront blanc (mode masque par défaut)
• une image dont les pixels de la couleur cherchée ont été retirés : plus la couleur du pixel est proche de celle cherchée, plus le pixel est transparent (mode retire)
• une image contenant uniquement des pixels de la couleur cherchée : la transparence de chaque pixel varie en fonction de la proximité de la couleur (mode opacite)
• une image contenant uniquement les pixels de la couleur cherchée : la transparence ET la clareté de chaque pixel varie en fonction de la proximité de la couleur (mode couleur)

Le principe c’est pour chaque pixel de calculer une distance entre la couleur du pixel et la couleur cherchée, de la normaliser par une distance de référence (rayon) et de modifier la couleur de ce pixel en fonction de cette distance et du mode choisi.

Syntaxe

|image_filtrer_couleur{couleur[,rayon[,mode[,format]]]}

Les arguments du filtre sont :

• couleur : n’importe quelle couleur html (green) ou hexa (#ffffff
• rayon : la distance de référence au delà de laquelle les pixels sont tous blancs — ou conservés, ou retirés, selon le mode. Par défaut : 100
• mode : masque, retire, opacite, couleur. Par défaut masque
• format : format de l’image png ou jpg ou auto. Par défaut png pour conserver la transparence

Exemples

-  Filtrer une image sur chacune de ses 5 couleurs principales :

#SET{palette,#FICHIER|extraire_palette_couleurs{5}}
<BOUCLE_filtre(POUR){tableau #GET{palette}}>
    <div style="display: inline-block;margin: 20px;">
        <div class="palette">
            <div style="display: inline-block;width: 30px;height: 15px;background-color: #VALEUR;"></div>
            </div>
        <div class="mire">
[(#FICHIER|balise_img|image_reduire{300,1000}|image_filtrer_couleur{#VALEUR})]
        </div>
    </div>
</BOUCLE_filtre>

-  Faire varier le rayon avec les valeurs 50, 100 et 150 :

[(#FICHIER|balise_img|image_filtrer_couleur{#ffffff,50})]
[(#FICHIER|balise_img|image_filtrer_couleur{#ffffff,100})]
[(#FICHIER|balise_img|image_filtrer_couleur{#ffffff,150})]

Toujours sur la même image d’origine, avec le résultat sur 3 couleurs. On voit que plus le rayon est grand, plus la sélection est large (de gauche à droite, rayons de 50, 100 et 150) :

-  Faire varier le mode :

[(#FICHIER|balise_img|image_filtrer_couleur{#ffffff,100,masque})]
[(#FICHIER|balise_img|image_filtrer_couleur{#ffffff,100,retire})]
[(#FICHIER|balise_img|image_filtrer_couleur{#ffffff,100,couleur})]
[(#FICHIER|balise_img|image_filtrer_couleur{#ffffff,100,opacite})]

Toujours sur la même image, sur 3 couleurs différente (la grille affichée derrière l’image permet d’apprécier la transparence) :

Si on force le format en JPG sur ces 4 filtres :

[(#FICHIER|balise_img|image_filtrer_couleur{#ffffff,100,masque,jpg})]
[(#FICHIER|balise_img|image_filtrer_couleur{#ffffff,100,retire,jpg})]
[(#FICHIER|balise_img|image_filtrer_couleur{#ffffff,100,couleur,jpg})]
[(#FICHIER|balise_img|image_filtrer_couleur{#ffffff,100,opacite,jpg})]

On voit que dans ce cas le dernier mode opacite retourne une image monochrome car l’information de transparence est perdue alors que c’était la seule chose qui variait dans cette image

Le mode opacité peut être utilisé pour mettre en valeur une couleur sur une image, en la passant en noir et blanc et en superposant le résultat obtenu par le mode opacité sur l’image d’origine en couleur :

<BOUCLE_colorise(POUR){tableau #GET{palette}}{0,3}>
	[(#FICHIER|image_nb)]
	#SET{masque,#FICHIER|image_filtrer_couleur{#VALEUR,100,'opacite'}|extraire_attribut{src}}
	[(#GET{masque}|balise_img)]
	[(#FICHIER|image_nb|image_masque{#GET{masque},mode=normal})]
</BOUCLE_colorise>

Filtre |image_potrace

Voici le premier filtre de vectorisation d’image proprement dit. Ce filtre utilise la librairie Potrace (ou plus exactement Potracio, qui est le portage PHP de Potrace) qui fait du tracé de contour à partir d’une image bitmap.

Potrace fait du tracé de contour monochromatique et fonctionne particulièrement bien en noir et blanc.

Une technique possible pour vectoriser une image couleur est donc de la passer en noir et blanc et passer un filtre passe haut pour mettre en valeur uniquement les contours avant d’utiliser potrace, ce qui donne alors un tracé noir et blanc des contours.

La technique utilisé par ce plugin est d’extraire une palette de couleur, et de vectoriser le contour de chaque couleur (en s’appuyant sur une image intermédiaire générée au moyen du filtre |image_filtrer_couleur), et de superposer les tracés ainsi obtenus pour composer l’image vectorielle.

Syntaxe

|image_potrace{[options]}

Le filtre a un seul argument optionnel, mais qui est un tableau d’options pouvant contenir une valeur pour les options suivantes :

• width_thumb : largeur de la vignette que l’on vectorise (256px par defaut)
• rounding : nombre de décimales pour arrondir les coordonnées des points du tracé (off pour ne pas arrondir)
• background : choix du background utilisé pour les zones restant vide après vectorisation : auto (par défaut) pour une couleur automatique moyenne des zones restantes, image pour utiliser une image bassedef des zones restantes, transparent pour ne pas mettre de background, ou une couleur arbitraire
• colors : un nombre de couleurs ou une liste explicite des couleurs a vectoriser - le poids du SVG augmente directement avec le nombre de couleur.
• stroke_width : l’épaisseur du contour des tracés (en opacité 50%) : cela peut-être un pourcentage (0.1%), une largeur en pixels (2px), none ou auto (par défaut), ajusté alors en fonction du nombre de couleurs (8%/nb_colors)

A noter que via les options il est aussi possible de passer des paramètres propre à l’algorithme de Potrace. Cette fonctionnalité est disponible pour ceux qui veulent s’y aventurer et notamment plonger dans les arcanes de Potrace pour comprendre leur utilisation, mais n’est pas documentée.

Exemple

[(#FICHIER|image_potrace{#ARRAY{colors,16,background,image}})]
[(#FICHIER|image_potrace{#ARRAY{colors,32,background,image}})]
[(#FICHIER|image_potrace{#ARRAY{colors,64,background,image}})]
[(#FICHIER|image_potrace{#ARRAY{colors,128,background,image}})]

Sur un échantillon d’images

Filtre |image_geometrize

Ce second filtre de vectorisation s’appuie sur la librairie Geometrize-php, portage optimisé en PHP de Geometrize, ré-écriture en open-source inspirée de Primitives (ouf!)

L’algorithme consiste à plaquer une par une des formes geometriques aléatoires que l’on optimise pour minimiser l’erreur avec l’image d’origine. Le processus, répété un grand nombre de fois, converge vers une approximation de l’image d’origine.

Cela donne des rendus d’autant meilleur que l’image d’origine n’est pas trop grande et ne contient pas trop de détails. L’algorithme est consommateur de temps de calcul, et donc le résultat final dépendra essentiellement du nombre de formes utilisées pour le rendu (et donc du temps de calcul acceptable)

Syntaxe

|image_geometrize{[nb_formes[,options]]}

Les arguments sont :

• le nombre de formes utilisé. Ce peut être un nombre entier, la valeur auto (par défaut) ou un multiplicateur de la valeur automatique (x2, x3). La valeur automatique est déterminée en fonction de la taille de l’image.
• les options supplémentaires avancées sont fournies sous forme de tableau clé/valeur :
  • shapes permet d’indiquer les formes que l’on veut utiliser parmi : triangle, rectangle, rotated_rectangle, circle, ellipse, rotated_ellipse, line, bezier. Les valeurs sont fournies en chaine séparée par des virgules.
    Par défaut seul les triangles sont utilisés, car c’est le meilleur compromis temps de calcul/rendu.
  • alpha : transparence des formes (de 0 = opaque a 127 = transparente). Par défaut on utilise 0 (opaque) qui est beaucoup plus rapide à calculer pour un rendu final qui n’est pas plus mauvais.
    * background : couleur de fond pour initialiser l’image. Par defaut on utilise la couleur dominante de l’image.
    * candidateShapesPerStep : nombres de formes aleatoires testées a chaque itération (par defaut 200, et la meilleure est conservée)
    * shapeMutationsPerStep : nombres de tentatives de mutation pour optimiser la forme retenue (par défaut 85)
    * maxShapes : nombre maximum de formes si on utilise un nombre de forme calculé automatiquement.

Exemple

[(#FICHIER|image_geometrize{500})]
[(#FICHIER|image_geometrize{500,#ARRAY{shapes,'triangle,rectangle'}})]
[(#FICHIER|image_geometrize{auto,#ARRAY{maxShapes,1000}})]

Sur un échantillon d’images