Question

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

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

您可以存储图片网址而不是图片对象。 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);
    });
  });
});

Answer 2

我前段时间为hackday project做过类似的事情，我直接将图片发布到Twitter上，虽然我没有使用本地存储，但也许这可以让你找到你想要的东西要做。

需要将画布图像转换为base64，然后从base64转换为二进制。这是使用.toDataURL()和dataURItoBlob()

完成的

这是一个非常繁琐的过程，需要拼凑几个SO答案，各种博客文章和教程。 I've created a tutorial you can follow which walks you through the process。

将画布存储到本地存储并加载所有画布名称

2 个答案: