JSFiddle - React, Tailwind, and code Playground

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: 1px;
    font-size: 4px;
    line-height: 3px;
    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;s+=i%w?'.:1@'[(d[o=i*4+3]?d[o]+d[o+1]+d[o+2]:0)*5e-3^0]:'\n');p(s)
})(document.createElement('canvas').getContext('2d'), this, this.offsetWidth, this.offsetHeight, function(result){document.getElementById('resultat').textContent = result;})
}


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