为什么来自 localStorage 的 drawImage 不起作用？

问题描述

使用 TypeScript，但我认为这不重要。

需要 StackOverflow 新标签：localstorage

如果你通过 .drawImage 将 img 标签复制到画布上，它工作正常。如果你从 localStorage 保存并加载它，你会得到：

drawImage：参数 1 无法转换为以下任何一个：HTMLImageElement、SVGImageElement、HTMLCanvasElement、HTMLVideoElement、ImageBitmap。

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>

JS：

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);

    // 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); //error: Argument 1 Could not be converted to any of: HTMLImageElement...
}

解决方法

如果您想将整个元素保留在 localStorage 中，则必须使用 imgSrc.outerHTML

localStorage.setItem('someStorageKey',imgSrc.outerHTML);

然后以一种特殊的方式获取元素：(DOMParser MDN) 和 SO answer

new DOMParser().parseFromString(localStorage.getItem('someStorageKey') as HTMLImageElement,"text/html").body.childNodes[0];

并等待图片加载：

img0.onload = () => {
  ctx1.drawImage(img0,0);
}

出于某种原因，我需要将图像附加到 <body> 才能使其工作。如果您也遇到这种情况，您可以立即删除图像（可能是 JSFiddle）：

document.body.append(img0);img0.remove();

完整代码：

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.outerHTML);

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

    // load img0
  var img0: HTMLImageElement = new DOMParser().parseFromString(localStorage.getItem('someStorageKey') as HTMLImageElement,"text/html").body.childNodes[0];
  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');
    img0.onload = () => {
    ctx1.drawImage(img0,0);
  }document.body.append(img0);img0.remove();
}

localStorage.setItem 只接受字符串，所以任何不是字符串的东西都会在被保存之前运行 .toString()，查看 MDN localStorage.setItem。

您是否考虑过将 img src 保存到 localStorage 并执行类似操作来呈现它https://stackoverflow.com/a/4776378/12523447

您应该仅将其 img 属性存储在 localStorage 中，而不是 src html 元素。然后，您只需创建一个图像，将其 src 设置为存储在 localStorage 中的值，并在加载后将其绘制在 canvas 上。像这样：

function saveImg(srcImgID) {
    // save img0 to local storage
  var img = document.getElementById(srcImgID);
  var imgSrc = img.getAttribute('src');
  
  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(img,0);

  var canvas1: HTMLCanvasElement = document.getElementById('img1') as HTMLCanvasElement;
  console.log('cavas1: ' + canvas1);
  var ctx1 = canvas1.getContext('2d');
  
  // load img0
  var img0Src = localStorage.getItem('someStorageKey') as HTMLImageElement;
  var img0 = new Image(); 
  
  img0.src = img0Src;
  
  img0.onload = function () {
    ctx1.drawImage(img0,0);
  }
}

找到了一个可行的解决方案，至少在 JSFiddle 中：https://jsfiddle.net/Dustin_00/nb1j3fw0/70/

@Rojo 的解决方案也有效。但在我的 .NET Core 应用程序中都不起作用 - 只是一张空白图像。

<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>

打字稿：

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);

  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);

  // 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);
  }
    imgFromStorage.src = imgData;
}

canvas drawimage image image image javascript typescript typescript typescript