Accueil > Documentation > Les balises XPX > PICT

PICT

Général

Le xpx vous permet de manipuler les images pour les formater et optimiser leurs poids de fichier. Vous utilisez pour ce faire la balise <pict> avec les attributs suivants :

  • « path=’’nom_du_fichier’’ » OU « content=’’$image$’’ » pour sélectionner la provenance de votre image.
  • « dest=’’nom_du_fichier’’ » pour indiquer où écrire votre image à la fin du traitement.
  • « name=’’varimage’’ » pour préciser le nom de l'image que vous traité (notamment pour lui appliquer plusieurs opération à la suite).
  • « transparency=’’#couleur’’ » indique quelle couleur doit être convertie en transparent.
  • « height=’’hauteur’’ » et « width=’’largeur’’ » permet de définir une nouvelle taille à l’image (précisée en pixels ou en pourcentage)
  • « Geth=’’hauteur » et « getw=’’largeur’’ » permet d'obtenir la dimension (dans les variables largeur et hauteur) de l'image en pixels

Formats d'images supportés par les attributs path (lecture) et dest (écriture) :

  • JPEG : Joint Photographic Experts Group (extension .jpg),
  • PNG : Portable Network Graphics (extension .png),
  • GIF : Graphics Interchange Format (extension .gif),
  • WebP * : format Google dérivé de RIFF (extension .webp),
  • TIFF * : Tagged Image File Format (extension .tiff),
  • BMP * : bitmap (extension .bmp),

* : à partir de la version 4.0a21-14

Ajout de texte

Vous pouvez modifier l'image en lui ajoutant du texte en surimpression.

  • « text=’’du_texte’’ » permet d’ajouter le texte
  • « Font=’’police’’ » indique le nom de la police utilisé. Vous pouvez utiliser vos propres font au format TTF en indiquant leurs sources.
  • « size=’’taille’’ » permet de choisir la taille du texte
  • « color=’’couleur’’ » permet de définir la couleur du texte et de celui du cadre de l’image
  • « border=’’taille’’ » permet de choisir la taille de la bordure en pixel (par défaut 0)
  • « rotate=’’rotation’’ » permet d'appliquer une rotation au texte (en degré)
  • « position=’’constante’’ » permet de choisir la position du texte. On utilise les valeurs suivantes :

     

     

    Hauteur 

     

    Largeur

    LEFT

    MIDDLE

    RIGHT

    TOP

    TL

    TM

    TR

    MIDDLE

    ML

    MM

    MR

    BOTTOM

    BL

    BM

    BR

  • vous pouvez également indiquer le position de votre texte en passant par les attributs « x=’’...’’ » et « y=’’...’’ ».

L'attribut calc="..." permet d'évaluer la place prise par un texte. On peu l'utiliser avec les attributs getH, getW et/ou getX, getY pour obtenir les dimensions du texte ou la position du coin opposé.

<pict path="une_image_test.jpg" name="image" height="50%" width="50%" text="photographie" font="Arial" size="10" color="black" position="MM" border="0">

Ajout de forme

Comme pour le texte, vous pouvez ajouter un rectangle ou une ligne coloré(e) à l'image.

  • « rect="point_x,point_y,largeur,hauteur" » permet d’ajouter un rectangle

  • « color="couleur" » permet de définir la couleur du rectangle (par son nom ou avec #rrggbb (rr=red gg=green bb=blue).

  • « fill="couleur - source_image" » permet de définir une couleur d'arrière plan ou une image de fond

  • « line="point1_x,point1_y,point2_x,point2_y" » permet d’ajouter une ligne

<pict name="img" width="50" height="50">
<pict name="img" rect="0,0,49,49" border="5" color="blue">
<pict name="img" rect="4,4,45,45" fill="cyan">
<pict name="img" rect="10,10,39,39" border="7" color="red">
<pict name="img" rect="10,10,39,39" border="1" color="white">
<pict name="img" line="10,10,39,39" border="3" color="008000">

Colorier une zone

Vous pouvez appliquer une couleur ou une image de fond à une plage de pixel de la même couleur.

  • Les attributs « x=’’...’’ » et « y=’’...’’ » permettent de sélectionner un pixel précis sur l'image. La zone traitée par la suite, correspond à tous les pixels ayant la même teinte.
  • Enfin, placé le code hexadécimal ou la source d'une image dans l'attribut « fill=’’...’’ » pour indiquer comment colorier la sélection.
<pict name="im" x="0" y="160" fill="#99CC00">

<pict name="img" [path="$chemin$" | content="$image$"]>

Crée une zone mémoire pour stocker l'image $img$.

Si path est indiqué, le fichier image est lu puis stocké dans $img$.

L'attribut content permet d'indiquer le contenu d'une image déjà chargé dans une variable.

<pict close="img">

Fermeture de l'image et libération de la mémoire

<pict name="img" dest="$chemin$">

Écrit l'image dans le fichier destination indiqué.

Le format d'image écrit dans le fichier est déterminé par l'extension utilisée (voir formats supportés ici).

<pict name="img" geth="height" getw="width">

Récupère la hauteur et la largeur d'une image.

<pict name="img" path="$gDirTelechargement$/$imgLogoGroupe$">
<pict name="img" geth="imgHeight" getw="imgwidth">

<pict name="img" rect="$x1$,$y1$,$x2$,$y2$" border="$border$" color="$color$" [fill=$fill$]>

Dessine un rectangle aux corrdonnées spécifiées dans l'image d'une épaisseur border et dans la couleur color.

La couleur peut être un code HTML hexadécimal #AABBCC ou un chemin vers un fichier qui servira pour le remplissage.

Le rectangle est rempli si l'attribut fill est précisé. Comme color, fill peut être un code couleur HTML ou un fichier image.

<pict name="img" width="$width$" height="$width$" [option="quality,speed"]>

Redimensionne l'image dans la dimension précisé par width et height.

L'option est par défaut "quality" qui utilise une méthode d'anti-aliasing. Si l'option est "speed", le traitement est plus rapide mais perd un peu en qualité.

<pict name="imgDest" copy="imgSrc" x="$posX$" y="$posY$" [srcparam="XX YY [W H]"]>

Copie l'image source (imgSrc) dans l'image de destination (imgDest) à la position X,Y.

À partir de la version 4.0a7, l'attribut srcparam permet de copier seulement une partie de l'image source en précisant XX et YY (origine) et W H (largeur et hauteur).

 

<pict name="img2" copy="img1" x="10" y="10" srcparam="30 30 150 40">

<pict name="img" rotate="$angle$">

Applique sur l'image une rotation exprimée en degrés dans le sens trigonométrique (anti-horaire) si l'angle est positif.

<pict name="img" rotate="90">

<pict flip="...">

L'attribut flip permet de réaliser un miroir avec les valeurs suivantes :

  • vertical, miroir vertical
  • horizontal, miroir horizontal
  • both, miroir dans les 2 directions

Cet attribut est disponible à partir de la version 4.0a21-17 (4002117).

<pict calc="texte a mesurer" size="taille" font="font" getw="largeur" geth="hauteur">

Mesure de la place en pixels que va prendre un texte dans une taille et une fonte choisie. Prend en compte les retour à la ligne.

<set name="textMesure" value="texte à mesurer\navec saut">

<pict calc="$textMesure$" font="fonts/Grimm1-0908.ttf" size="24" geth="getH" getw="getW">

$getW$x$getH$ => 245x58

<pict qrcode="..." [...]

L'attribut qrcode permet la génération automatique d'un QR Code à partir de la chaîne fournie. La taille du bitmap créé dépend de la longueur de la chaîne de caractères.

ATTENTION : la chaîne doit être encodée en UTF-8.

Attributs de rendu graphique :

  • thickness : taille en pixels image des "pixels" du QR Code (défaut : 4),

  • margin : marge vide autour (en multiples de thickness, défaut : 2),

  • border : épaisseur du cadre autour du QR Code (en multiples de thickness, défaut : 0 (pas de cadre)),

  • color : couleur des pixels du QR code (défaut : noir),

  • bgcolor : couleur de fond du QR code (défaut : blanc).


Attributs (facultatifs) de paramétrage fin :

  • version : valeur entre 1 et 40 donnant la taille du QR Code, et partant la capacité de la chaîne (plus la valeur est petite, plus l'image sera petite et plus la chaîne devra être courte),

  • ecc : niveau code de correction d'erreur. 4 valeurs possibles : L, M, Q, H, chacune avec un taux de redondance spécifique.
    L=Low (7%), M=Medium(15%), Q=Quartile (25%), H=High(30%)

  • mask : définit le masque appliqué (valeur entre 0 et 7).

Pour plus d'informations sur ces 3 paramètres, voir ici.

Cette fonctionnalité est présente depuis la version 4.0a19 (4001903). Les attributs de paramétrage fin à partir de la version 4001904.

<pict name="img" qrcode="tel:0437240123" thickness="3" margin="2" border="1"
    color="green" bgcolor="#eeeeee">

Résultat :

QR Code

Télécharger

Téléchargez rapidement la dernière version du XPX: Version 3.8-rc16 - 05/02/2019

Le saviez vous ?

Convertit une chaine en caractères hexadécimaux (majuscules)

FAQ

Venez nous poser vos questions et voir les problèmes courants que vous pouvez rencontrer

Don

Aidez-nous à faire vivre ce site en faisant un don

Condition d'utilisation