Marmits Wiki

Image vers ASCII vers SVG

Version datée du 21 octobre 2025 à 13:10 par Geo (discussion | contributions) (→📌 Notes)

Voici une proposition de page README.md en Markdown qui explique clairement ce que font les deux solutions que tu as listées. Elle est structurée pour être facilement compréhensible par des développeurs ou utilisateurs techniques :


🖼️ Conversion d’image en ASCII puis en SVG

Ce projet propose deux méthodes pour convertir une image (.png) en une représentation ASCII, puis en SVG. L’objectif est de produire une version vectorielle stylisée de l’image, utile pour des rendus légers ou artistiques.


🧩 Prérequis

  • img2txt (du paquet caca-utils)
  • sed
  • aasvg
  • ImageMagick (convert)
  • chafa
  • a2s


🥇 Solution 1 : img2txt + aasvg

Étapes

  1. Conversion en ASCII avec codes ANSI
    On utilise img2txt pour générer une version ASCII colorée de l’image :

    img2txt -W 150 -x 1 -y 2 -d fstein -f ansi picture.png | sed -r 's/\x1B\[[0-9;]*[mK]//g' > picture.txt
    • -W 150 : largeur de sortie en caractères
    • -x 1 -y 2 : facteur d’étirement horizontal et vertical
    • -d fstein : algorithme de dithering
    • -f ansi : sortie avec codes ANSI (couleurs)
    • sed ... : suppression des séquences ANSI pour ne garder que les caractères ASCII

  2. Conversion ASCII → SVG
    On transforme le fichier ASCII en SVG :

    aasvg --spaces=0 --stretch --fill < picture.txt > picture.svg
    • Chaque glyphe devient un élément <text> dans le SVG
    • --spaces=0 : pas d’espacement entre les caractères
    • --stretch : étirement automatique
    • --fill : remplissage des glyphes


🥈 Solution 2 : ImageMagick + chafa + a2s

Étapes

  1. Prétraitement de l’image
    On prépare l’image pour une meilleure détection des contours :

    convert picture.png -colorspace gray -normalize -edge 1 -threshold 10% picture-pre.png
    • Conversion en niveaux de gris
    • Normalisation du contraste
    • Détection des bords
    • Seuillage pour accentuer les contours

  2. Conversion en ASCII simplifié
    On génère une version ASCII sans couleurs :

    chafa --format=symbols --colors=none --dither=none \
      --symbols=ascii --size=200x \
      picture-pre.png > picture.txt
    • --symbols=ascii : uniquement des caractères ASCII
    • --colors=none : pas de couleurs
    • --dither=none : pas de tramage
    • --size=200x : largeur de 200 caractères

  3. ASCII → SVG
    On convertit le fichier ASCII en SVG :

    a2s < picture.txt > picture.svg

  4. Nettoyage du SVG
    On supprime les lignes parasites :

    sed '/<g id="lines"/,/<\/g>/d' picture.svg > picture-clean.svg


📁 Résultat

  • picture.txt : version ASCII de l’image
  • picture.svg : version vectorielle
  • picture-clean.svg : SVG nettoyé (solution 2)


📌 Notes

  • La solution 1 est plus rapide et produit un SVG avec des glyphes colorés si on garde les séquences ANSI.
  • La solution 2 est plus adaptée pour des rendus en noir et blanc ou des effets de contours.

Exemple d'intégration de l'image SVG dans un fichier HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Test</title>
    <meta name="description" content="Du web, du code.">
    <style>
      div#background{
        width: 100%;
        height: 100%;
        position: fixed;
        background-image: url("picture-clean.svg");
        background-position: center center;
        background-repeat: no-repeat;
        background-size:  contain;
        color:#FFF;
      }
    </style>
</head>
<body>
<div id="background"></div>
</body>
</html>
Récupérée de "https://marmits.com/w/index.php?title=Image_vers_ASCII_vers_SVG&oldid=3543"