JSFiddle - React, Tailwind, and code Playground

by CYRIL MOREAU

HTML

Image de base : <br>
<img id='imageBase' src='' alt='Image de base' /><br><br>
Ascii :<br>
<div id='resultat'></div>

CSS

div {
    letter-spacing: 0px;
    font-size: 4px;
    line-height: 2px;
    font-family: "courier new";
}

JavaScript

var imgHTML  =  document.getElementById('imageBase')
imgHTML.src = '../img/logo.png';

imgHTML.onload = function() {
    //... Début des 140bytes ici ...
    (function imgToAscii(c,e,w,h,p,s,i,o){
for(c.drawImage(e,s=i='',0),d=c.getImageData(0,0,w,h).data;i++<w*h;s+=i%w?'.;1@'[(d[o=i*4+3]?d[o]+d[o+1]+d[o+2]:0)*4e-3^0]:'\n');p(s)
})(document.createElement('canvas').getContext('2d'), this, this.offsetWidth, this.offsetHeight, function(result){document.getElementById('resultat').innerHTML = '<pre>'+result+'</pre>';})
    
    // Explications :
    /*
    (function imgToAscii(d,w,h,t,s,i,o){
      for(
        c.drawImage(e,s=i='',0),       // dessin de l'image dans le canvas
        d=c.getImageData(0,0,w,h).data // récupération des données rgba de l'image (par pixel)
                                       // initialisation des variables (s: chaine finale, i: compteur)
        i++<w*h;                       // incrémentation de i tant qu'on n'a pas parcouru le tableau des pixels
        s+=i%w?                        // Test si fin de la ligne ou pas
          '.;1@'                       // Tableau de correspondance ascii, du plus clair au plus foncé
          [(d[o=i*4+3]?                // o = offset. d[o+3] : alpha. Si pas fin de ligne, test si la donnée "alpha" de l'image est nulle. Autrement dit, test si c'est transparent ou non
          d[o]+d[o+1]+d[o+2]           // d[o] : r, d[o+1] : g, d[o+2] : b
                                       // moyenne des trois données pour le contraste. Equivaut à Max(r,g,b). On obtient un nombre entre 0 et 255 ... 
          :0)                          // le pixel est transparent
          *5e-3^0]                     // ... que l'on divise par 255, puis par 3 (moyenne des 3 composantes) et multiplie par 4 (length de notre table de correspondance) pour obtenir notre ascii dans notre table
                                       // 4 / 255 / 3 = 0.00522875816993464 ~= 52e-4 ~= 5e-3. Diminuer cette valeur pour diminuer le...