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="img1" height='100' width='100' style='border:1px solid #d3d3d3;'></canvas>
  <canvas id="img2" height='100' width='100' style='border:1px solid #d3d3d3;'></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 saveImg(srcImgID) {
	// save img0 to local storage
  var imgSrc = document.getElementById(srcImgID);
  localStorage.setItem('someStorageKey', imgSrc);

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

	// load img0
  var img0: HTMLImageElement = localStorage.getItem('someStorageKey') as HTMLImageElement;
  console.log('Image data loaded: ' + img0);

	// copy img0 => img1
  var canvas1: HTMLCanvasElement = document.getElementById('img1') as HTMLCanvasElement;
  console.log('cavas1: ' + canvas1);
  var ctx1 = canvas1.getContext('2d');
  ctx1.drawImage(img0, 0, 0); //error: Argument 1 could not be converted to any of: HTMLImageElement...
}