JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id='example'></canvas>
<img id="imageId" src="" >
JavaScript
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("http://shrek.by/Photo/Shrek.jpg");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
var image = document.getElementById('imageId');
var b64image = getBase64Image(image);
localStorage.setItem('imageIdCached', b64image);