« Image vers ASCII vers SVG » : différence entre les versions
| (11 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
= 🖼️ Conversion d’image en ASCII puis en SVG = | |||
3 méthodes pour convertir une image (<code>.png</code>) 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. | |||
----- | ----- | ||
Voir : | |||
*[[Ascii| Ascii]] | |||
*[[SVG| SVG]] | |||
== 🥇 Solution 1 : img2txt + aasvg == | |||
=== 🧩 Prérequis === | |||
== 🧩 Prérequis == | |||
* <code>img2txt</code> (du paquet <code>caca-utils</code>) | * <code>img2txt</code> (du paquet <code>caca-utils</code>) | ||
* <code>aasvg</code> | * <code>aasvg</code> | ||
=== Étapes === | === Étapes === | ||
| Ligne 52 : | Ligne 41 : | ||
== 🥈 Solution 2 : ImageMagick + chafa + a2s == | == 🥈 Solution 2 : ImageMagick + chafa + a2s == | ||
=== 🧩 Prérequis === | |||
* <code>ImageMagick</code> (<code>convert</code>) | |||
* <code>chafa</code> | |||
* <code>a2s</code> | |||
* <code>sed</code> | |||
=== Étapes === | === Étapes === | ||
| Ligne 83 : | Ligne 78 : | ||
<syntaxhighlight lang="bash">sed '/<g id="lines"/,/<\/g>/d' picture.svg > picture-clean.svg</syntaxhighlight></li></ol> | <syntaxhighlight lang="bash">sed '/<g id="lines"/,/<\/g>/d' picture.svg > picture-clean.svg</syntaxhighlight></li></ol> | ||
== | == 📁 Résultat == | ||
On génère une version ASCII avec couleurs : | * <code>picture.txt</code> : version ASCII de l’image | ||
* <code>picture.svg</code> : version vectorielle | |||
* <code>picture-clean.svg</code> : SVG nettoyé (solution 2) | |||
== 🥉 Solution 3 : img2txt + scrypt Python 3 == | |||
Avec couleurs Préservées | |||
=== 🧩 Prérequis === | |||
* <code>img2txt</code> (du paquet <code>caca-utils</code>) | |||
* <code>python</code> | |||
* <code>sed</code> | |||
=== On génère une version ASCII avec couleurs : === | |||
<syntaxhighlight lang="bash"> | <syntaxhighlight lang="bash"> | ||
img2txt -W 100 -x 1 -y 2 picture.png > picture.txt | img2txt -W 100 -x 1 -y 2 picture.png > picture.txt | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Exécution du script Python | === Exécution du script Python === | ||
<syntaxhighlight lang="bash"> | <syntaxhighlight lang="bash"> | ||
python3 ansi2svg_pure.py picture.txt picture.svg \ | python3 ansi2svg_pure.py picture.txt picture.svg \ | ||
| Ligne 101 : | Ligne 108 : | ||
</syntaxhighlight> | </syntaxhighlight> | ||
==== Script python ==== | |||
<syntaxhighlight lang="python" line> | <syntaxhighlight lang="python" line> | ||
#!/usr/bin/env python3 | #!/usr/bin/env python3 | ||
| Ligne 385 : | Ligne 393 : | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Suppresion du fond | === Suppresion du fond === | ||
<syntaxhighlight lang="bash"> | <syntaxhighlight lang="bash"> | ||
sed -i '/<rect/d' picture.svg | sed -i '/<rect/d' picture.svg | ||
</syntaxhighlight> | </syntaxhighlight> | ||
----- | ----- | ||
| Ligne 399 : | Ligne 404 : | ||
* La '''solution 1''' est plus rapide et produit un SVG avec des glyphes colorés si on garde les séquences ANSI. | * 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. | * La '''solution 2''' est plus adaptée pour des rendus en noir et blanc ou des effets de contours. | ||
* La '''solution 3''' permet une conversion avec couleurs préservées, en interprétant les séquences ANSI (y compris les couleurs 256 et truecolor) et en les traduisant en éléments SVG. Elle gère également les styles typographiques comme le gras, italique et souligné, ainsi que les fonds colorés. Le rendu est plus fidèle à l’ASCII d’origine, mais nécessite Python 3 et un script dédié sans dépendances externes. | |||
= Exemple d'intégration de l'image SVG dans un fichier HTML = | = Exemple d'intégration de l'image SVG dans un fichier HTML = | ||
| Ligne 415 : | Ligne 421 : | ||
height: 100%; | height: 100%; | ||
position: fixed; | position: fixed; | ||
background-image: url("picture | background-image: url("picture.svg"); | ||
background-position: center center; | background-position: center center; | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
| Ligne 432 : | Ligne 438 : | ||
[[Catégorie:Dev]] | [[Catégorie:Dev]] | ||
[[Catégorie:Geek]] | [[Catégorie:Geek]] | ||
[[Catégorie: Terminal Tools]] | |||