TypeScript

Can't render canvas after saving to localStorage

by Dustin

HTML

<div id="app">
  <img id="img0" src='https://ir.ebaystatic.com/rs/v/fxxj3ttftm5ltcqnto1o4baovyl.png' height='100' width='100'>
  <canvas id="canvas1" height='100' width='100' style='border:2px solid #00f;'></canvas>
  <canvas id="canvas2" height='100' width='100' style='border:2px solid #f00;'></canvas>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  text-align: center;
}

TypeScript

const img = document.querySelector("#img0");
img.setAttribute('crossOrigin','anonymous'); // mark image as safe for toDataURL

document.querySelector("#img0").onload = () => {
  saveImg('img0');
};

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("image/png");

  return dataURL;
}

function saveImg(srcImgID) {
	// save img0 to local storage
  var imgSrc = document.getElementById(srcImgID);
  var imgBase64 = getBase64Image(imgSrc);
  localStorage.setItem('someStorageKey', imgBase64);

	// copy img0 => canvas2 (red border)
  var canvas2: HTMLCanvasElement = document.getElementById('canvas2') as HTMLCanvasElement;
  //console.log('cavas2: ' + canvas2);
  var ctx2 = canvas2.getContext('2d');
  ctx2.drawImage(imgSrc, 0, 0);

  // load img0
  var imgData = localStorage.getItem('someStorageKey');

  // copy img0 => canvas1 (blue border) from storage
  var canvas1: HTMLCanvasElement = document.getElementById('canvas1') as HTMLCanvasElement;
  //console.log('cavas1: ' + canvas1);
  var ctx1 : HTMLCanvasElement = canvas1.getContext('2d');
  //console.log('ctx1: ' + ctx1);
  
  var imgFromStorage = new Image(); 
  imgFromStorage.onload = function () {
  	//console.log('imgFromStorage: ' + imgFromStorage);
    //console.log('imgFromStorage.src: ' + imgFromStorage.src);
    ctx1.drawImage(imgFromStorage, 0, 0);
  }
	imgFromStorage.src = imgData;
}