JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

table {
    display: inline;
    letter-spacing: 0px;
    font-size: 8px;
    line-height: 4px;
    margin: 0px;
    padding: 0px;
    text-align: "left";
    font-family: "courier new";
    text-decoration: "none";
    border-spacing: 0;
    border-collapse: collapse;
}

JavaScript

var img            =  new Image()
  , ctx            =  document.createElement('canvas').getContext('2d')
  , imgHTML        =  document.getElementById('imageBase')
  , tdResultat     =  document.getElementById('resultat')
  , dataCanvas, w, h;

 var printFunction = function(result){
        console.log(result);
        tdResultat.textContent = result;
    };

img.src = imgHTML.src = '../img/logo.png'; 

img.onload = function() {
    ctx.drawImage(this,0,0);
    var w = imgHTML.offsetWidth^0;
    var h = imgHTML.offsetHeight^0;
    //... Début des 140bytes ici ...
    (function imgToAscii(c,w,h,p,s,i,o){
for(s=i='',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)*5e-3^0]:'\n');p(s)
    })(ctx, w, h, printFunction)
    
   
    
    // Explications :
    exit; // inutile d'aller plus loin
    (function imgToAscii(d,w,h,t,s,i,o){
      for(s=i='';          // initialisation des variables (s: chaine finale, i: compteur)
        i++<w*h;          // incrémentation de i tant qu'on 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]?   // : = 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
          *0.0156^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
        :'<br>');          // fin de ligne donc saut de ligne
       ...