Convertir un texte html en image png

Version imprimable

09/02/2026, 04h09
Kojoh

Convertir un texte html en image png

Bonjour, j'ai une zone de texte input, dans laquelle le client écrit son texte, je voudrais que via un lien, il puisse télécharger le texte écrit sur une image au format PNG, est ce que je peux avoir votre aide s'ils vous plait ?
09/02/2026, 07h54
fred1599

Hello,

Vous n'informez pas sur le type de texte, est-ce du multilignes ?

Je serai pour créer un Canvas (genre de tableau noir ou blanc) où vous dessinerez ce qu'à écrit l'utilisateur (donc en fonction de la quantité de texte, le format du Canvas change).

De là Canvas a une méthode toDataURL qui permet de link votre image du canvas.
09/02/2026, 08h02
Kojoh

Bonjour, non juste une ligne
09/02/2026, 08h23
fred1599

Donc pas besoin de se préoccuper des sauts de ligne, ma solution reste là même
09/02/2026, 08h31
Kojoh

J'ai fait une rechercher google, il ne me donne que des sites pour faire une conversion en ligne.

J'ai créer ce code qui affiche des polices :

https://www.johok-bt.fr/FONTS_JHK/index.php

Je voudrais que l'utilisateur puisse exporter une image d'un texte avec une police au choix

Voici un code généré par l'IA qui ressemble à ce que je disais plus haut

Code:

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
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Texte vers PNG</title>
    <style>
        body { font-family: sans-serif; padding: 20px; }
        .container { max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
        input { padding: 10px; font-size: 16px; }
        button { padding: 10px; background-color: #007bff; color: white; border: none; cursor: pointer; }
        button:hover { background-color: #0056b3; }
    </style>
</head>
<body>
 
<div class="container">
    <label for="userText">Entrez votre texte :</label>
    <input type="text" id="userText" placeholder="Écrivez ici..." value="Mon texte en image">
 
    <button onclick="downloadTextAsImage()">Télécharger en PNG</button>
</div>
 
<script>
    function downloadTextAsImage() {
        // 1. Récupérer le texte de l'input
        const text = document.getElementById('userText').value;
 
        if (!text) {
            alert("Veuillez entrer du texte !");
            return;
        }
 
        // 2. Créer un élément canvas invisible
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
 
        // 3. Définir la police (nécessaire avant de mesurer la largeur)
        const fontSize = 24;
        const fontFace = 'Arial';
        ctx.font = `${fontSize}px ${fontFace}`;
 
        // 4. Calculer la taille dynamique du canvas selon le texte
        const textMetrics = ctx.measureText(text);
        const padding = 20; // Espace autour du texte
        
        canvas.width = textMetrics.width + (padding * 2);
        canvas.height = fontSize + (padding * 2);
 
        // 5. Redéfinir la police (car le redimensionnement du canvas réinitialise le contexte)
        ctx.font = `${fontSize}px ${fontFace}`;
        ctx.textBaseline = 'middle'; // Pour centrer verticalement
 
        // 6. Ajouter un fond (optionnel - sinon ce sera transparent)
        ctx.fillStyle = '#ffffff'; // Blanc
        ctx.fillRect(0, 0, canvas.width, canvas.height);
 
        // 7. Dessiner le texte
        ctx.fillStyle = '#000000'; // Noir
        ctx.fillText(text, padding, canvas.height / 2);
 
        // 8. Convertir en image et déclencher le téléchargement
        const imageURI = canvas.toDataURL('image/png');
        
        const link = document.createElement('a');
        link.download = 'mon-texte.png';
        link.href = imageURI;
        document.body.appendChild(link); // Nécessaire pour Firefox
        link.click();
        document.body.removeChild(link); // Nettoyage
    }
</script>
 
</body>
</html>

Merci beaucoup, donc à partir de ce code et l'aide de gpt, j'en suis là, l'image ce télécharge mais sans la bone police, a savoir que la police et sur le serveur et pas chez e client :

Code:

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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta charset="utf-8" />
 
 
<title>JOHOK Fonts JHK</title>
<META NAME="DESCRIPTION" CONTENT="Mes spolices d'&eacute;criture">
<meta name="keywords" content="">
 
<meta name="viewport" content="width=device-width,  minimum-scale=0.25,  minimum-scale=0.25" />
 
<style type="text/css">
<!--
img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
    max-width: 100%;
}
p {
  margin:12px;
}
body,td,th {
        color: #000000;
        }
body {
 
        background-color:#ffffff;
 
}
h1 { font-size: 5.9vw; }
h2 { font-size: 3.0vh; }
p { font-size: 2vmin; }
a:link {
        color: #ffffff;
        font-size: 22px;
        font-weight: bold;
        text-decoration: none;
}
a:visited {
        text-decoration: none;
        color: #ffffff;
}
a:hover {
        text-decoration: none;
        color: #FF0000;
}
a:active {
        text-decoration: none;
        color: #ffffff;
}
.l:link {
        color: #000000;
        font-weight: bold;
        text-decoration: none;
}
.l:visited {
        text-decoration: none;
        color: #000000;
}
.l:hover {
        text-decoration: none;
        color: #FF0000;
}
.l:active {
        text-decoration: none;
        color: #000000;
}
.Style4 {
     font-weight: bold;
     font-size: 35px;
}
.Style4b {
     font-weight: bold;
     font-size: 25px;
}
.nwesit {
     font-weight: bold;
     font-size: 40px;
}
 
input, select, textarea {
    font-size:45px;
        font-weight:bold;
    width: 60%;
        height:60px;
    padding: 8px 10px;
    color: #000000;
    border: 1px solid #444;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset rgba(0,0,0,0.35) 2px 2px 12px;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    transition: all 0.7s;
}
input:hover, select:hover, textarea:hover {
    font-size:25px;
        font-weight:bold;
    width: 60%;
        height:60px;
    border: 1px solid #000000;}
input:focus, select:focus, textarea:focus {
    font-size:25px;
        font-weight:bold;
    width: 60%;
        height:60px;
    color: #000000;
    border: 1px solid #000000;
    box-shadow: inset rgba(0,0,0,0.35) 2px 2px 12px, #000000 0 0 10px;
    outline: 0;
}
button {
    font-size:20px;
        font-weight:bold;
    width: 20%;
        height:60px;
    padding: 8px 10px;
    color: #000000;
    border: 1px solid #444;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset rgba(0,0,0,0.35) 2px 2px 12px;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    transition: all 0.7s;
}
button:hover {
    font-size:20px;
        font-weight:bold;
    width: 20%;
        height:60px;
    border: 1px solid #000000;
        }
button:focus {
    font-size:20px;
        font-weight:bold;
    width: 20%;
        height:60px;
    color: #000000;
    border: 1px solid #000000;
    box-shadow: inset rgba(0,0,0,0.35) 2px 2px 12px, #000000 0 0 10px;
    outline: 0;
}
#apDiv1 {
        position: absolute;
        width: 47px;
        height: 69px;
        z-index: 1;
        left: 1163px;
        top: 104px;
        font-size: 120px;
        color: #8C8585;
}
 
 
<?php 
 
$directories = glob(getcwd()."{/*.OTF,/*.otf}",GLOB_BRACE);
 
foreach ($directories as $dirt) 
{ 
$dirt_2 = str_replace('/home/johokbq/www/FONTS_JHK/', '', $dirt);
$dirt_3 = str_replace('.otf', '', $dirt_2);
         echo '@font-face { font-family:\''.$dirt_3.'\'; src: url(\''.$dirt_2.'\'); format(\'opentype\'); Font-display: swap; } ';
                 echo '.JHKFONT';
                 echo '{font-family:\''.$dirt_3.'\';} ';
} 
 
?>
 
 
-->
</style>
 
<head>
 
</head>
 
<body>
 
<div  align="center">
 
<br><br><br>
 
<form>
 
<?php 
 
$txtclt = $_POST['text_client']; 
 
$directories = glob(getcwd()."{/*.OTF,/*.otf}",GLOB_BRACE);
foreach ($directories as $dir) 
{ 
$dir_2 = str_replace('/home/johokbq/www/FONTS_JHK/', '', $dir);
$dir_3 = str_replace('.otf', '', $dir_2);
         echo '<input type="button" value="'.$txtclt.'" style="font-family: \''.$dir_3.'\'; " onclick="downloadTextAsImage(this.value, \''.$dir_3.'\')"/><br><br>';              
                 
} 
  
?>
 
</form>
 
</div>
 
<script>
function downloadTextAsImage(texte, police) {
    if (!texte) {
        alert("Veuillez écrire un texte !");
        return;
    }
 
    // Fonction async interne pour gérer le chargement de la police
    (async () => {
        const fontSize = 48;
        const padding = 30;
 
        try {
            // attend que la police soit prête
            await document.fonts.load(`${fontSize}px ${police}`);
            await document.fonts.ready;
        } catch (e) {
            console.warn("La police n'a pas pu être chargée :", police);
        }
 
        // création du canvas
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
 
        ctx.font = `${fontSize}px ${police}`;
        const metrics = ctx.measureText(texte);
 
        canvas.width = metrics.width + padding * 2;
        canvas.height = fontSize + padding * 2;
 
        // reset contexte après resize
        ctx.font = `${fontSize}px ${police}`;
        ctx.textBaseline = 'middle';
 
        // fond blanc
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
 
        // texte
        ctx.fillStyle = '#000000';
        ctx.fillText(texte, padding, canvas.height / 2);
 
        // créer le lien et télécharger
        const link = document.createElement('a');
        link.href = canvas.toDataURL('image/png');
        link.download = `${police}.png`;
 
        // nécessaire pour Firefox
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    })();
}
</script>
 
 
</body>
</html>

Surprenant que l'IA ne vous fasse pas la correction dans ce cas,

Code:

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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>JOHOK Fonts JHK - Générateur PNG</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
<style type="text/css">
    body {
        background-color: #ffffff;
        color: #000;
        font-family: sans-serif;
        text-align: center;
        padding: 20px;
    }
 
    /* Style général des inputs/boutons pour l'interface */
    .font-button {
        font-size: 30px;
        width: 80%;
        max-width: 600px;
        padding: 15px;
        margin-bottom: 20px;
        cursor: pointer;
        background: rgba(0, 0, 0, 0.05);
        border: 1px solid #ccc;
        border-radius: 5px;
        transition: all 0.3s;
        /* Important : on force le navigateur à ne pas utiliser de police de secours si possible */
        text-rendering: optimizeLegibility;
    }
 
    .font-button:hover {
        background-color: #f0f0f0;
        border-color: #000;
        transform: scale(1.02);
    }
 
    /* ZONE PHP : Génération propre des @font-face */
    <?php 
    // On récupère les fichiers OTF
    $files = glob(getcwd() . "/*.{otf,OTF}", GLOB_BRACE);
    
    // Tableau pour stocker les infos et les réutiliser plus bas dans le HTML
    $fontsList = [];
 
    foreach ($files as $filePath) {
        // basename() nettoie tout le chemin pour ne garder que "fichier.otf"
        $fileName = basename($filePath); 
        // pathinfo() récupère le nom sans l'extension pour le nom de la famille (ex: "Arial")
        $fontName = pathinfo($filePath, PATHINFO_FILENAME);
        
        // On stocke pour plus tard
        $fontsList[] = [
            'name' => $fontName,
            'file' => $fileName
        ];
 
        // On écrit la règle CSS standard
        // Note : on ajoute des guillemets autour de l'URL pour la sécurité
        echo "@font-face { font-family: '" . $fontName . "'; src: url('" . $fileName . "') format('opentype'); font-display: swap; } \n";
        
        // On crée une classe CSS unique pour l'affichage du bouton
        echo ".style-" . preg_replace('/[^a-zA-Z0-9]/', '', $fontName) . " { font-family: '" . $fontName . "'; } \n";
    }
    ?>
</style>
</head>
 
<body>
 
    <h1>Cliquez sur un style pour télécharger le PNG</h1>
 
    <?php 
    // Récupération du texte client (avec valeur par défaut si vide)
    $txtclt = isset($_POST['text_client']) && !empty($_POST['text_client']) ? $_POST['text_client'] : "Mon Texte Test"; 
    // Sécurité : on échappe les guillemets pour éviter de casser le HTML
    $txtSafe = htmlspecialchars($txtclt, ENT_QUOTES);
    ?>
 
    <div id="buttons-container">
        <?php foreach ($fontsList as $font): ?>
            <input 
                type="button" 
                value="<?php echo $txtSafe; ?>" 
                class="font-button style-<?php echo preg_replace('/[^a-zA-Z0-9]/', '', $font['name']); ?>"
                onclick="downloadTextAsImage(this.value, '<?php echo $font['name']; ?>')" 
            />
            <br>
        <?php endforeach; ?>
    </div>
 
<script>
/**
 * Génère une image PNG à partir du texte et de la police spécifiée.
 * Utilise l'API CSS Font Loading pour s'assurer que le Canvas peut dessiner la police.
 */
function downloadTextAsImage(texte, policeName) {
    if (!texte) {
        alert("Le texte est vide !");
        return;
    }
 
    // On utilise une fonction asynchrone pour attendre le chargement précis de la police
    (async () => {
        const fontSize = 60; // Taille de police sur l'image (plus grand = meilleure qualité)
        const padding = 40;  // Marges
        
        // Construction de la chaîne de police CSS complète
        // IMPORTANT : Mettre des guillemets autour du nom de la police pour gérer les espaces
        const fontStr = `${fontSize}px "${policeName}"`;
 
        try {
            // ÉTAPE CRUCIALE : On force le navigateur à vérifier que la police est chargée
            // pour ce contexte précis avant de dessiner.
            await document.fonts.load(fontStr);
        } catch (e) {
            console.warn("Erreur de chargement de la police : " + policeName, e);
            // On continue quand même, au pire ce sera en Arial, mais souvent ça passe.
        }
 
        // Création du canvas
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
 
        // On définit la police une première fois pour mesurer
        ctx.font = fontStr;
        const metrics = ctx.measureText(texte);
 
        // On redimensionne le canvas (hauteur approximative basée sur la taille de police)
        canvas.width = metrics.width + (padding * 2);
        canvas.height = (fontSize * 1.5) + (padding * 2);
 
        // Le redimensionnement efface le contexte, on réapplique les réglages
        ctx.font = fontStr;
        ctx.textBaseline = 'middle';
        ctx.textAlign = 'center';
 
        // 1. Fond (optionnel, mettre en commentaire pour fond transparent)
        ctx.fillStyle = '#ffffff'; 
        ctx.fillRect(0, 0, canvas.width, canvas.height);
 
        // 2. Couleur du texte
        ctx.fillStyle = '#000000';
        
        // 3. Dessin du texte (au centre)
        ctx.fillText(texte, canvas.width / 2, canvas.height / 2);
 
        // Téléchargement
        const link = document.createElement('a');
        link.download = `${policeName.replace(/\s+/g, '_')}.png`; // Nom de fichier propre
        link.href = canvas.toDataURL('image/png');
        
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    })();
}
</script>
 
</body>
</html>

10/02/2026, 19h42
NoSmoking

Bonjour,

Citation:

l'image ce télécharge mais sans la bone police,

un point important spécifié dans la source de fred1599, c'est l'utilisation de guillemets autour du nom de la fonte.

Code:

const fontStyle = `${fontSize}px "${police}"`; // ne pas oublier les guillemets autour du nom de la police

Citation:

<family-name>.

Le nom d'une famille de polices. Il doit s'agir soit d'une seule valeur de type <string>, soit d'une séquence d'identifiants personnalisés (<custom-ident>) séparés par des espaces. Les valeurs de chaîne de caractères doivent être entourées de guillemets mais peuvent contenir n'importe quel caractère Unicode. Les identifiants personnalisés ne sont pas entourés de guillemets, mais certains caractères doivent être échappés.

Il est recommandé d'entourer de guillemets les noms de famille de police qui contiennent des espaces, des chiffres ou des signes de ponctuation autres que les traits d'union.
10/02/2026, 20h00
Kojoh

Merci à vous, cela fonctionne parfaitement bien.