JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

JavaScript

function onImageLoaded() {
    //... 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;o=i*4+3,s+=i%w?"<font style='color:rgb("+d[o+1]+','+d[o+2]+','+d[o+3]+")'>"+' ░▒▓'[(d[o]?d[o+1]+d[o+2]+d[o+3]:0)*5e-3^0]+"</font>":'\n');p(s)
})(document.createElement('canvas').getContext('2d'), this, this.offsetWidth, this.offsetHeight, function(result){document.getElementById('resultat').innerHTML = result;})
}


var imgHTML  =  document.getElementById('imageBase')
imgHTML.src =...