JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://upload.wikimedia.org/wikipedia/en/thumb/1/17/BarbraStreisand.jpg/220px-BarbraStreisand.jpg" onload="f()">
    
<img id="uploadPreview" />

JavaScript

var f = function f() {
    var img = document.images[0];
    var h = img.height, w = img.width;
    var canvas = document.createElement('canvas');
    canvas.width = w;
    canvas.height = h;
    console.log(w,h);
    var ctx = canvas.getContext('2d');

//    ctx.drawImage(img,h,w); 
    ctx.rect(20,20,150,100);
    ctx.fillStyle="red";
    ctx.fill();
   
    ctx.strokeStyle="hsla(205,86%,70%,1)";
    ctx.lineWidth = 20;
    ctx.strokeRect(120,50,150,100);
    
    var o = canvas.toDataURL('image/png');
    
    console.log(o);
    var png = o.split(',')[1];
    var s = window.atob(png);
    console.log(png);
    console.log(btoa(s));
    
    var z = new Blob([s],  {type: 'image/png', encoding: 'utf-8'});
    console.log(z);
    
    var fr = new FileReader();
    fr.onload = function ( oFREvent ) {
        
        var vvv = oFREvent.target.result.split(',')[1];
        vvv = atob(vvv);
        var aaa = btoa(decodeURIComponent(escape(vvv)));
        console.log(aaa);
        document.getElementById("uploadPreview").src =
"data:image/png;base64," + aaa;
    }
    var q = fr.readAsDataURL(z);
    
}