JSFiddle - React, Tailwind, and code Playground

by Nikita Karpov

HTML

<img id="imageId" crossOrigin="Anonymous" src="https://unsplash.it/300/200/?random" >
<canvas  id='example'></canvas>

CSS

canvas{
    border: 1px solid #c0c0c0;
}

JavaScript

function getB64(img){
        var canvas = document.getElementById("example");
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0,0);     	
    	var dataURL = canvas.toDataURL("image/png");
    alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
}
var image = document.getElementById('imageId');
getB64(image);