i'm using fabric.js to add image object to canvas. Serialization works fine, but after deserialization canvas object is empty. console.log(JSON.stringify(canvas)) returns: {"objects":[],"background":""}

here is my code:

var canvas = new fabric.Canvas('goCanvas');

fabric.Image.fromURL("rooryteam03da088a.jpeg", function(oImg) {
        canvas.add(oImg);
});

var serialized = JSON.stringify(canvas);

canvas.clear();

canvas.loadFromDatalessJSON(serialized);

console.log(JSON.stringify(canvas));

I also tried loadFromJSON instead of loadFromDatalessJSON for deserialization, but with no result. So, What i'm doing wrong?

i'm using fabric.js to add image object to canvas. Serialization works fine, but after deserialization canvas object is empty. console.log(JSON.stringify(canvas)) returns: {"objects":[],"background":""}

here is my code:

var canvas = new fabric.Canvas('goCanvas');

fabric.Image.fromURL("rooryteam03da088a.jpeg", function(oImg) {
        canvas.add(oImg);
});

var serialized = JSON.stringify(canvas);

canvas.clear();

canvas.loadFromDatalessJSON(serialized);

console.log(JSON.stringify(canvas));

I also tried loadFromJSON instead of loadFromDatalessJSON for deserialization, but with no result. So, What i'm doing wrong?

• javascript
• fabricjs

Share Improve this question Follow edited Aug 21, 2015 at 12:22 Ketevan Toria asked Aug 21, 2015 at 12:17 Ketevan ToriaKetevan Toria 12922 silver badges1414 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

fabric.Image.fromURL is async. You stringify the canvas before receiving the image, you should move that code to the image loading callback:

var canvas = new fabric.Canvas('goCanvas');

fabric.Image.fromURL("rooryteam03da088a.jpeg", function(oImg) {
  canvas.add(oImg);

  var serialized = JSON.stringify(canvas);
  canvas.clear();
  canvas.loadFromDatalessJSON(serialized);
  console.log(JSON.stringify(canvas));
});

The variable serialized bees a reference to the object canvas. When you call canvas.clear() you empty the canvas, and thus your variable serialized, which references canvas, bees empty as well.

I'm not following what you are attempting to achieve since you are clearing the canvas only to add the same content back to it, so not sure how to offer an alternate option.