javascript - 将 Canvas 存储到本地存储并加载所有 Canvas 名称

Question

我有一个 Canvas 图像，我想将其存储为本地存储，然后我想在 HTML 中的所有 Canvas 名称上加载 Canvas 。谢谢

var img = new Image();
    	//Wait for image to load before doing something with content
    	img.onload = function() {         
      	var canvas = document.querySelectorAll("canvas[name=myCanvas]"); 
   		for (var i = 0; i < canvas.length; i++) {
   	          canvas[i].getContext("2d").drawImage(img,10,10);
        }
    	};
    	img.src = 'http://i.imgur.com/VdXQ7z6.png';  
        localStorage.setItem("img", img); 

<p>Image to use:</p>
<img id="scream" onload="draw(this)" src="http://i.imgur.com/VdXQ7z6.png" alt="The Scream" width="220" height="277">

<p>Canvas:</p>
<canvas name="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas name="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas name="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

Answer 1

您可以存储图像 URL 而不是图像对象。 localStorage只能存储字符串，不能存储任意数据。

如果你想使用base64编码，here's a demo on JSFiddle 。我本来打算在堆栈片段上执行此操作，但处理图像数据时有太多限制，因此，这里是所有 JavaScript 代码:

var input = document.getElementById('upload');

var canvas1 = document.getElementById('disp');
var context1 = canvas1.getContext('2d');

var canvas2 = document.getElementById('test');
var context2 = canvas2.getContext('2d');

function processBlob(blob, callback) {
  console.log('generating image from blob');

  var blobURL = URL.createObjectURL(blob);

  var img = new Image();

  img.addEventListener('load', function () {
    console.log('blob url loaded');

    URL.revokeObjectURL(blobURL);

    // 'this' is img
    callback.apply(this, arguments);
  });

  img.src = blobURL;
}

function drawImage(canvas, context, image) {
  console.log('drawing image to ' + canvas.id);

  var width = image.naturalWidth;
  var height = image.naturalHeight;

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

  context.drawImage(image, 0, 0, width, height);
}

function storeImage(canvas, itemName) {
  console.log('storing image from ' +
              canvas.id + ' to ' + itemName);

  // remove 22 byte header from base64
  var dataURL = canvas.toDataURL('image/png').slice(22);

  localStorage.setItem(itemName, dataURL);
}

function loadImage(itemName, callback) {
  console.log('loading image from ' + itemName);

  var dataURL = localStorage.getItem(itemName);
  var binary = atob(dataURL);
  var uint8 = new Uint8Array(binary.length);

  for (var i = 0; i < binary.length; i++) {
    uint8[i] = binary.charCodeAt(i);
  }

  var blob = new Blob([uint8], { type: 'image/png' });

  processBlob(blob, callback);
}

console.log('start of program');
input.addEventListener('change', function () {
  var file = this.files[0];

  console.log('processing ' + file.name);

  processBlob(file, function () {
    console.log('callback for file image');

    drawImage(canvas1, context1, this);
    storeImage(canvas1, 'myImage');

    loadImage('myImage', function () {
      console.log('callback for localStorage image');

      drawImage(canvas2, context2, this);
    });
  });
});