Nguyễn Thành Nam Nguyễn Thành Nam - 5 months ago 29
Javascript Question

Store canvas to local storage and load all canvas name

I have a canvas image, and I want to store that as local storage, then I want to load a canvas on all canvas names in

HTML
.thanks



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

You could store the image URL instead of the image object. localStorage can only store strings, not arbitrary data.

If you want to use base64 encoding, here's a demo on JSFiddle. I was going to do it on a stack snippet but there's too many restrictions when dealing with image data, so instead, here's all the JavaScript code:

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