Convertir un texte html en image png

**Kojoh** · 09/02/2026, 04h09

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 ?

**fred1599** · 09/02/2026, 07h54

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.

**Kojoh** · 09/02/2026, 08h02

Bonjour, non juste une ligne

**fred1599** · 09/02/2026, 08h23

Donc pas besoin de se préoccuper des sauts de ligne, ma solution reste là même

**Kojoh** · 09/02/2026, 08h31

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

**fred1599** · 09/02/2026, 10h18

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

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
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>

Convertir un texte html en image png

JavaScript

Vue hybride

Discussions similaires

Partager

Partager