Saving current work from multiple canvas elements

Question

Here is my problem: I have created an image collage function in javascript. (I started off with some code from this post btw: dragging and resizing an image on html5 canvas)

I have 10 canvas elements stacked on top of each other and all parameters, including 2dcontext, image data, positions etc. for each canvas is held in instances of the function 'collage'.

This is working fine, I can manipulate each canvas separately (drag, resize, adding frames, etc). But now and I want the user to be able to save the current work.

So I figure that maybe it would be possible to create a blob, that contains all the object instances, and then save the blob as a file on disk.

This is the function collage (I also push each instance to the array collage.instances, to be able to have numbered indexes)

function collage() {
  this.canvas_board = '';
  this.canvas = '';
  this.ctx = '';
  this.canvasOffset = '';
  this.offsetX = '';
  this.offsetY = '';
  this.startX = '';
  this.startY = '';
  this.imageX = '';
  this.imageY = '';
  this.mouseX = '';
  this.mouseY = '';
  this.imageWidth = '';
  this.imageHeight = '';
  this.imageRight = '';
  this.imageBottom = '';
  this.imgframe = '';
  this.frame = 'noframe';
  this.img = '';
  collage.instances.push(this);
}
collage.instances = [];

I tried with something like this:

var oMyBlob = new Blob(collage.instances, {type: 'multipart/form-data'});

But that doesn't work (only contains about 300 bits of data).

Anyone who can help? Or maybe suggest an alternative way to save the current collage work. It must of course must be possible to open the blob and repopulate the object instances.

Or maybe I am making this a bit more complicated than it has to be... but I am stuck right now, so I would appreciate any hints.

Answer 1

You can extract each layer's image data to DataURLs and save the result as a json object.

Here's a quick demo: http://codepen.io/gunderson/pen/PqWZwW

The process literally takes each canvas and saves out its data for later import.

The use of jquery here is for convenience:

$(".save-button").click(function() {
  var imgData = JSON.stringify({
    layers: getLayerData()
  });
  save(imgData, "myfile.json");
});

function save(filecontents, filename) {
  try {
    var $a = $("<a>").attr({
      href: "data:application/json;," + filecontents,
      download: filename
    })[0].click();
    return filecontents;
  } catch (err) {
    console.error(err);
    return null;
  }
}

function getLayerData() {
  var imgData = [];
  $(".layer").each(function(i, el) {
    imgData.push(el.toDataURL("image/png"));
  });
  return imgData;
}

To restore, you can use a FileReader to read the contents of the JSON back into the browser, then make <img>s for each layer, set img.src to the dataURLs in your JSON and from there you can draw the <img> into onload canvases.

Answer 2

Add a reference (src URL) for the image to the instance, then serialize the instance array as JSON and use f.ex. localStorage.

localStorage.setItem("currentwork", JSON.stringify(collage.instances));

Then to restore you would need to do:

var tmp = localStorage.getItem("currentwork");
collage.instances = tmp ? JSON.parse(tmp) : [];

You then need to iterate through the array and reload the images using proper onload handling. Finally re-render everything.

Can you store image data on client? Yes, but not recommended. This will take a lot of space and if too much you will not be able to save all the data, the user may refuse to allow more storage space etc.

Keeping a link to the image on a server is a better approach for these things IMO. But if you disagree, look into IndexedDB (or WebSQL although deprecated) to have local storage which can be expanded in available space. localStorage can only hold between 2.5 - 5 mb, ie. no image data and only strings. Each char takes two bytes, data-uris adds 33% on top, so this will run empty pretty fast...