ASCII Art Renderer
Convertit une vraie image en caractères ASCII dans le navigateur : chaque pixel réduit devient une lettre plus ou moins dense, en vert lumineux qui pulse doucement.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Distorsion comprend 31 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Vous placez votre image dans .ascg-frame sous la forme d'un <img class="ascg-src"> (ou d'un data-src). Au chargement, le script la dessine en tout petit sur un canvas hors écran : un pixel par caractère. Le nombre de colonnes vient de data-cols (auto par défaut : autant de caractères que la largeur du cadre en contient) ; le nombre de lignes suit les proportions de l'image et la taille réelle d'un caractère, mesurée dans la police utilisée.
getImageData() lit ensuite chaque pixel. Sa luminance (0,2126 R + 0,7152 G + 0,0722 B, multipliée par l'opacité) choisit un caractère dans la gamme data-chars, du plus sombre au plus clair : " .:-=+*#%@" par défaut. Un pixel noir donne une espace, un pixel blanc un @. Le texte obtenu remplit <pre class="ascg-art">, une ligne par <span>, et l'image d'origine est masquée.
La lueur verte de chaque ligne pulse en 2 s (animation ascgGlow), une ligne sur deux décalée d'une demi-seconde. Si le cadre change de largeur, un ResizeObserver relance la conversion (avec data-cols="auto" seulement) ; si vous changez le src de l'image, elle est reconvertie à son chargement. Le code de démonstration contient une tête de chat en SVG inscrite en data:, à remplacer par votre image.
Accessibilité
- Texte alternatif : le
<pre>porterole="img"et reçoit lealtde votre image enaria-label: un lecteur d'écran annonce « Tête de chat », pas des centaines de signes. Écrivez donc unaltqui décrit l'image. - Réduire les animations : sous
prefers-reduced-motion: reduce, la lueur ne pulse plus ; le dessin reste affiché avec une lueur fixe. La conversion elle-même n'est pas une animation. - Sans JavaScript ou image illisible : l'image d'origine reste affichée normalement dans le cadre. C'est aussi le cas pour une image d'un autre domaine servie sans autorisation CORS, que le navigateur interdit de lire.
- Lisibilité : le dessin est décoratif par nature ; ne mettez pas dans l'image un texte que le visiteur doit lire, il deviendrait illisible une fois converti.
Compatibilité navigateur
Canvas 2D, getImageData, ResizeObserver et 3,2 Ko de JavaScript, sans dépendance. La plus récente des fonctions utilisées est ResizeObserver (Chrome 64, Firefox 69, Safari 13.1 d'après les données MDN) ; sans elle, la conversion se fait au chargement mais ne suit pas les changements de largeur. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : conversion identique (une image SVG en data: se lit dans les trois), deux copies indépendantes, aucune variable sur window, aucun travail hors écran.
Sans JavaScript, l'image d'origine s'affiche dans le cadre noir. Une image d'un autre domaine sans en-tête CORS (ou sans crossorigin="anonymous") ne peut pas être lue par le canvas : elle reste affichée telle quelle, sans erreur.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0273-root" data-cols="auto">
<div class="ascg-frame">
<img class="ascg-src" alt="Tête de chat" src="votre-image.jpg">
<pre class="ascg-art" role="img"></pre>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Votre image (HTML — <img class="ascg-src" src="…" alt="…"> ou data-src) |
Tête de chat en SVG de démonstration | Image du même domaine, en data:, ou d'un serveur qui autorise CORS (ajoutez alors crossorigin="anonymous"). Les images contrastées, sur fond sombre, donnent les meilleurs résultats. |
Colonnes (HTML — data-cols sur la racine) |
auto (largeur du cadre) |
Un nombre fixe (40, 80, 120…) donne la même finesse partout ; la hauteur suit les proportions de l'image. Limité entre 8 et 240. |
Gamme de caractères (HTML — data-chars) |
" .:-=+*#%@" |
Du plus sombre au plus clair. " ░▒▓█" donne des blocs pleins, " 01" un rendu binaire. |
Inverser (HTML — data-invert="true") |
Non | Pour un sujet sombre sur fond clair, ou pour afficher le dessin en caractères sombres sur un cadre clair. |
Finesse (CSS — --ascg-size, --ascg-spacing) |
10 px, espacement 1 px | 4 à 6 px avec --ascg-spacing: 0 pour un portrait détaillé ; 12 px et plus pour un rendu gros grain. |
Couleurs (CSS — --ascg-color, --ascg-glow, --ascg-border) |
#3f3, 51,255,51, #0f0 |
--ascg-glow s'écrit en trois nombres r,g,b. Ambre, bleu ou blanc changent complètement l'ambiance. |
Cadre (CSS — --ascg-w, --ascg-h, --ascg-page, --ascg-root-h) |
280 px × 140 px minimum, fond #0a0a0f |
--ascg-w: 100% avec data-cols="auto" remplit une zone entière ; --ascg-page: transparent et --ascg-root-h: 0 retirent le cadre de démonstration. |
FAQ
data:, ou depuis un serveur qui envoie Access-Control-Allow-Origin, et ajoutez crossorigin="anonymous" sur la balise <img>.auto. Rien ne tourne en continu ; seule la lueur est animée en CSS.src change. Pour une vidéo, il faudrait relancer la lecture du canvas à chaque image, ce que l'effet ne fait pas.
