IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Langage PHP Discussion :

[GD] Qualité du texte écrire sur une image avec une police TTF – imagefttext.


Sujet :

Langage PHP

  1. #1
    Invité
    Invité(e)
    Par défaut [GD] Qualité du texte écrire sur une image avec une police TTF – imagefttext.
    Bonjour,

    Ci-joint, de quoi reproduire la situation.
    - Test\Vue.php = Template de la page d’accueil.
    - Test\css\vue.css = Thème ou style de la page d'accueil.
    - Test\images\image.php = Création de l'image et du texte.
    - Test\images\ segoeui.ttf = Police utilisée.

    Voir PJ : test.zip

    J'ai fixé en dur les valeurs journalières et horaires de la programmation du chauffage pour simuler les informations.
    En changent les valeurs horaire (05:30,22:00) du fichier vue.php mon image évolue.
    La police d'écriture "segoeui" de la page d'accueil et défini par le style déclaré:
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    Pour la création du texte sur l'image, GD semble avoir besoin que le fichier de police (TTF) soit placer dans le même répertoire que le script.

    Je cherche à reproduire ou utiliser la même qualité de texte sur mon image que celle utilisé par la page d'accueil.
    J'ai ajouté un "echo" pour mettre en évidence cette différence.
    Pouvez-vous m'aider ?

    Bien cordialement
    Fichiers attachés Fichiers attachés

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 394
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 394
    Points : 15 755
    Points
    15 755
    Par défaut
    c'est peut être la police utilisée qui produit ce souci.
    j'ai fait un test avec une police plus fine (trouvée là : https://www.dafont.com/fr/caviar-dreams.font) et le texte a l'air plus clair.
    Images attachées Images attachées  

  3. #3
    Membre habitué Avatar de ane-mais
    Femme Profil pro
    Étudiant
    Inscrit en
    Mars 2022
    Messages
    37
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mars 2022
    Messages : 37
    Points : 162
    Points
    162
    Par défaut
    voir les réponses déjà données https://www.developpez.net/forums/d2...lice-truetype/ sur le même sujet du même auteur :
    Citation Envoyé par NeriXs Voir le message
    Bonjour,
    J'aimerais améliorer le rendu du texte de mes images.
    Je pensais pouvoir m'en sortir avec "imagettftext" en déclarent une police "$font = 'arial.ttf';", mais je ne m'en sort pas.
    Pourriez-vous m'aider ?

  4. #4
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 394
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 394
    Points : 15 755
    Points
    15 755
    Par défaut
    des autres solutions serait de générer une image au format svg ou alors utiliser du javascript :
    https://www.chartjs.org/docs/latest/...orizontal.html

  5. #5
    Invité
    Invité(e)
    Par défaut
    Bonjour mathieu,

    J'ai testé un certain nombre de polices, mais rien de concluant vu que j'ai plusieurs tuiles les unes à côté des autres et qu'elles utilisent toutes la même police.
    C'est uniquement cette tuile ou je "dessine" le texte qui fait "tache" au milieux des autres.

    Pour JavaScript, votre idée est de l'utiliser pour recréer les "barres" de couleurs et les textes ou uniquement les textes ?
    Si c'est pour l'ensemble, auriez-vous un exemple de positionnement de barres qui se chevauchent, je ne sais pas trop comment appréhender / exploiter le code du lien donné .

    Bien cordialement

  6. #6
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    N'ayant pas réussi à adapter la création de mon image vers le format SVG et ne maitrisant pas javascript, j'ai essayé une autre approche.
    Au lieu de dessiner le texte le poser sur l'image.
    Je ne dois pas avoir la bonne approche et suis bloquer sur l'affichage des périodes (00:00 06:00 12:00 18:00 24:00).
    Fichiers attachés Fichiers attachés

  7. #7
    Membre actif
    Homme Profil pro
    libre
    Inscrit en
    Juin 2019
    Messages
    205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Activité : libre

    Informations forums :
    Inscription : Juin 2019
    Messages : 205
    Points : 292
    Points
    292
    Par défaut
    Le format SVG n'est pas compliqué lorsqu'il s'agit du texte ou des formes de base comme dans votre cas vous pouvez écrire le ficher de sortie manuellement en remplaçant les fonctions de la lib GD par des opérations équivalentes qui génèrent les mêmes styles et formes géométriques.


    svg.zip

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    <?php
      header("Content-type: image/svg+xml");
     
    $offsetGauche = 30;
    $offsetDroit = 15;
     
    $width = (isset($_GET['width']) ? $_GET['width'] : 240);
    $height = (isset($_GET['height']) ? $_GET['height'] : 35);
     
    $prog = (isset($_GET['prog']) ? $_GET['prog'] : '');
     
    $title = (isset($_GET['title']) ? $_GET['title'] : ' ');
     
    $n = intval(($width - $offsetGauche - $offsetDroit) / 24);
    $taille = $n * 24;
     
     $font= "verdana"; 									 
     $fontSize = "10";
     
     $blanc = "white";
     $orange = "orange";
     $rouge = "red";
     $bleuclair = "rgb(124, 182, 236)";
     $gris = "gray";
     $grisClair = "rgb(192, 192, 192)";
     $noir = "black";
     
    $strX = 15;
    $strY = 10;
     
    $titleX = 0;
    $titleY = 30;
    function SvgTxt($x,$y,$str,$size, $color,$fontname, $anchor){
      echo <<<oo
    	<text x="{$x}" y="{$y}"  
    		fill="{$color}"
    		stroke="none" 
    		font-family="{$fontname}"
    		font-size="{$size}" 
    		text-anchor="{$anchor}">
    		{$str}
    	</text>
    
    oo;
    }
    function SvgLine($x1,$y1,$x2,$y2, $color){
      echo <<<oo
    	<line x1="{$x1}" y1="{$y1}"  
    		x2="{$x2}" y2="{$y2}" 
    		stroke="{$color}" fill="none" />
    
    oo;
    }
    function SvgRect($x1,$y1,$x2,$y2, $color){
      $w=$x2-$x1;
      $h=$y2-$y1;
      echo <<<oo
    	<rect x="{$x1}" y="{$y1}"  
    		width="{$w}" 
    		height="{$h}" 
    		fill="{$color}" 
    		stroke="none" />
    
    oo;
    }
     
    // debut
    echo <<<oo
    <?xml version="1.0"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
                  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
    <svg xmlns="http://www.w3.org/2000/svg"  width="{$width}" height="{$height}">
    oo;
     
    for ($i=0; $i<=24; $i++) {
        $x = $i*$n+$offsetGauche;
        if (($i % 6) == 0) {
           // ImageLine($image, $x, 15, $x, 25, $gris);
    	     SvgLine($x, 15, $x, 25, $gris);
            if ($i < 12) {
                $str = '0' . $i . ':00';
            } else {
                $str = $i . ':00';
            }
     
           //imagefttext($image, $fontSize, $strAngle, $x-$strX, $strY, $noir, $fontfile, $str);
    	    	SvgTxt($x , $strY, $str, $fontSize, $noir, $font, "middle");
        } else {
           // ImageLine($image, $x, 20, $x, 25, $grisClair);
    	      SvgLine($x, 20, $x, 25, $grisClair);
        }
    }
     
     //imagefttext($image, $fontSize, $titleAngle, $titleX, $titleY, $noir, $fontfile, $title);
    SvgTxt($titleX, $titleY, $title, $fontSize, $noir, $font, "start" );
     
    //imagefilledrectangle($image, $offsetGauche, 26, $taille + $offsetGauche, 35, $bleuclair);
    SvgRect($offsetGauche,26,$taille + $offsetGauche,35,$bleuclair);
    if ($prog !== '') {
        $progs = explode(",", $prog);
        $n = count($progs);
        if (($n % 3) == 0) {
            for ($i=0; $i<$n; $i+=3) {
                $mode = $progs[$i];
                $start = $progs[$i+1];
                $end = $progs[$i+2];
                $nombres = explode(":", $start);
                $debut = $nombres[0] * 60 + $nombres[1];
                $debut = $offsetGauche + $taille * $debut / 1440;
                $nombres = explode(":", $end);
                $fin = $nombres[0] * 60 + $nombres[1];
                $fin = $offsetGauche + $taille * $fin / 1440;
                if ($mode === 'n') {
                   // imagefilledrectangle($image, $debut, 26, $fin, 35, $orange);
    				SvgRect($debut, 26, $fin, 35, $orange);
                } else {
                   // imagefilledrectangle($image, $debut, 26, $fin, 35, $rouge);
    			   SvgRect($debut, 26, $fin, 35, $rouge);
                }
            }
        }
    }
     
    echo "</svg>";
     
     
    ?>

  8. #8
    Invité
    Invité(e)
    Par défaut
    Bonsoir,

    Ah oui, ça le fait grave. Merci beaucoup.

    J'essaie de comprendre !
    Vous utilisez une police nommée "verdana", d’où vient-elle ? Du système apparemment.
    Elle est proche de celle que j'utilise "segoeui", qui est défini pour l'ensemble de ma page comme je l'ai expliqué dans le 1er poste de cette discussion.

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

    Est-il possible d'utiliser les polices définies par ce style ?

    Bien cordialement
    Dernière modification par Invité ; 29/03/2022 à 17h13.

  9. #9
    Membre actif
    Homme Profil pro
    libre
    Inscrit en
    Juin 2019
    Messages
    205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Activité : libre

    Informations forums :
    Inscription : Juin 2019
    Messages : 205
    Points : 292
    Points
    292
    Par défaut
    Elle est proche de celle que j'utilise "segoeui", qui est défini pour l'ensemble de ma page comme je l'ai expliqué dans le 1er poste de cette discussion.
    Le nom correct est Segoe UI je l'ai testé aussi comme pas mal d'autres elle était la derniers que j'ai essayée.. elle est présente dans la class classTuile comme police par défaut ..

  10. #10
    Invité
    Invité(e)
    Par défaut
    Merci Wheel, c'est exactement le rendu voulu.
    Effectivement j'orthographiais mal "Segoe UI".

    Je voulais essayer d'augmenter un peu la hauteur des "SvgRect" (+2), en passant la valeur 26 à 24, c'est OK, mais je ne parviens pas à déplacer d'autant "SvgTxt" et "SvgLine" pour conserver les proportions.

    Pourriez-vous m'aider ?

    Bien cordialement

  11. #11
    Membre actif
    Homme Profil pro
    libre
    Inscrit en
    Juin 2019
    Messages
    205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Activité : libre

    Informations forums :
    Inscription : Juin 2019
    Messages : 205
    Points : 292
    Points
    292
    Par défaut
    Tu fais la même chose pour SvgLine décrémentes (par -2) le deuxième paramètre qui représente le coordonné Y du début de la ligne...

    Si le rendu du texte (noms des jours) vous désespère a ce point alors ne le dessiner pas sur l'image mais mettez le dans la page principale... c'est facile placez un tableaux (Table) à deux colonnes la premières tu y mets les noms des jours et dans l'autre l'image correspondante ainsi tu auras l’accès aux styles de la page.

  12. #12
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    C'est OK pour "SvgRect" et "SvgLine", -1 suffit.
    Concernant le tableau pour le texte, je n'ai pas compris comment le mettre en place, la structure m'échappe, idéalement un tableau avec 3 éléments (jour "title", image "img" et programmation "str") non ?
    Dernière modification par Invité ; 30/03/2022 à 23h25.

  13. #13
    Membre actif
    Homme Profil pro
    libre
    Inscrit en
    Juin 2019
    Messages
    205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Activité : libre

    Informations forums :
    Inscription : Juin 2019
    Messages : 205
    Points : 292
    Points
    292
    Par défaut
    voir les Table html

    un exemple pour les trois premiers jours essaie à comprendre et continuer avec les jours restants..
    J'ai mis la bordure est à 1 (border="1") afin quelle soit visible après tu peux la rendre invisible en remplaçant par 0 .. la font de la table est assignée au style classText
    dans image.php annuler l’opération du dessin pour du texte ou mettez $titre="" et décaler un peu vers la gauche l’échelle: $offsetGauche = 20
    Supprimer tout le contenu du Div Tuile les images et retours à la ligne remplacer par le code suivant
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <table class="classText"  border="1" cellspacing="0px" width="100%">
      <tr>
        <td>Lun</td>
        <td><img src="images/image.php?width=220&amp;height=40&amp;prog=n,05:30,22:00&amp;title=Lun"></td>
      </tr>
      <tr>
        <td>Mar</td>
        <td><img src="images/image.php?width=220&amp;height=40&amp;prog=n,05:30,22:00&amp;title=Mar"></td>
      </tr>
      <tr>
        <td>Mer</td>
        <td><img src="images/image.php?width=220&amp;height=40&amp;prog=n,05:30,22:00&amp;title=Mer"></td>
      </tr>  
    </table>

  14. #14
    Invité
    Invité(e)
    Par défaut
    Jusque-là je pense être OK !

    J'ai dû ajouter class="classProg" qui manquait pour l'image dans les balises "<img".
    Le fait de passer $titre à vide ($titre="") ne fonctionne pas = pas d'image, j'ai commenter "SvgTxt" correspondant.

    Pour le CSS, je ne sais pas comment récupérer le nom des "case du tableau".
    Fichiers attachés Fichiers attachés

  15. #15
    Membre actif
    Homme Profil pro
    libre
    Inscrit en
    Juin 2019
    Messages
    205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Activité : libre

    Informations forums :
    Inscription : Juin 2019
    Messages : 205
    Points : 292
    Points
    292
    Par défaut
    Le fait de passer $titre à vide ($titre="") ne fonctionne pas = pas d'image,
    Je me suis trompé de nom c'est plutôt $title et pas $titre

    je ne sais pas comment récupérer le nom des "case du tableau".
    c'est le balise td qui représente une cellule dans le tableau .

    <td class="votre style">Lun</td>.


    dans votre exemple il ne reste qu'a fixer les bonnes proportions pour l'image soit pas d'augmentation de la taille du panneau principale ou l'adaptation la taille de l'image avec celle de la cellule du tableau ...

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    .classProg {
    	width: 100%;
    	height: 100%;}

  16. #16
    Invité
    Invité(e)
    Par défaut
    Merci pour votre disponibilité, après avoir longuement joué avec les positions autour du texte SVG j'ai quelque chose qui me plait.
    Le petit exercice sur le tableau m'aura tout de même appris quelque chose.

    Une dernière petite question avant de passer ce poste en résolut:
    Dans le fichier vue.css, pour classeTuile vous avez déclaré "font-family: Segoe UI;".
    En le commentant, l'appel " $font= "Segoe UI";" du fichier vue.php fonctionne.
    Une raison particulière à cette déclaration font-family ?
    Bien cordialement

  17. #17
    Membre actif
    Homme Profil pro
    libre
    Inscrit en
    Juin 2019
    Messages
    205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Activité : libre

    Informations forums :
    Inscription : Juin 2019
    Messages : 205
    Points : 292
    Points
    292
    Par défaut
    Puisque tu utilises le font principale du document il n'a aucun utilité tu peux le supprimer .

  18. #18
    Invité
    Invité(e)
    Par défaut
    OK, merci et bonne fin de journée.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Ecrire un texte transparent sur une image.
    Par insane_80 dans le forum VB.NET
    Réponses: 2
    Dernier message: 28/02/2008, 13h10
  2. texte positionné sur une image, en bas
    Par poupouille dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 07/02/2008, 21h03
  3. Texte défilant sur une image
    Par Invité dans le forum Flash
    Réponses: 1
    Dernier message: 13/06/2007, 11h05
  4. Écrire sur une image
    Par djdolphin dans le forum Balisage (X)HTML et validation W3C
    Réponses: 6
    Dernier message: 18/01/2007, 22h12
  5. Comment écrire sur une image, dans un cadre ?
    Par Nutrino dans le forum Balisage (X)HTML et validation W3C
    Réponses: 7
    Dernier message: 20/05/2005, 00h55

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo