JSFiddle - React, Tailwind, and code Playground

by Luiz Silva

HTML

Original: <img id="original" src="//fiddle.jshell.net/img/logo.png"/><br/>
<button id="ds">Get and Save</button>
<button id="ls">Load and Show</button><br/>

CSS

img {
   background-color: blue; 
}

JavaScript

function toBase64String(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("image/png");
    return dataURL;
}

document.querySelector('#ds').addEventListener('click', function() {
  localStorage.setItem('minha-imagem', toBase64String(document.getElementById('original')));
});

document.querySelector('#ls').addEventListener('click', function() {
  var img = document.createElement('img');
  img.src = localStorage.getItem('minha-imagem');
  document.body.appendChild(img);
});