tets_load_from_localstorage

by Konstantin Cryman

HTML

<img id="test_id" src="" />

JavaScript

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const I_M_G = document.getElementById('test_id');

const img = new Image();

img.crossOrigin = 'anonymous';

img.onload = () => {

  canvas.width = img.width;
  canvas.height = img.height;

  ctx.fillStyle = 'red';
  // ctx.fillRect(0, 0, canvas.width, canvas.height);

  ctx.drawImage(img, 0, 0);

  ctx.font = '48px serif'
  ctx.fillText('1', 10, 50, 24);
  ctx.fillText('2', 10, 150, 24);
  ctx.fillText('3', 10, 250, 24);
  ctx.fillText('4', 10, 350, 24);
  ctx.fillText('5', 10, 450, 24);

   // localStorage.setItem('generatedImage', canvas.toDataURL('image/png', 1)); // cropped
   // localStorage.setItem('generatedImage', canvas.toDataURL('image/jpeg', 1)); // error
  // localStorage.setItem('generatedImage', canvas.toDataURL('image/jpeg', 0.99)); // works
   localStorage.setItem('generatedImage', canvas.toDataURL('image/png', 0.99)); // doesnt work

	console.log( localStorage.getItem('generatedImage') );

	 I_M_G.src = localStorage.getItem('generatedImage');

};

/* document.body.appendChild(canvas); */

img.src = 'https://cdn.pixabay.com/photo/2014/05/26/13/32/butterfly-354528_960_720.jpg';