保存用fabric.js创建的画布

Question

i want to store the canvas generated with the fabric.js, i have canvas as like below in my page

 <div class="canvas-container" style="width: 600px; height: 600px; position: relative; -moz-user-select: none;">
    <canvas height="600" width="600" id="design-stage" class="lower-canvas" style="position: absolute; width: 600px; height: 600px; left: 0px; top: 0px; -moz-user-select: none;"></canvas>
    <canvas class="upper-canvas " style="position: absolute; width: 600px; height: 600px; left: 0px; top: 0px; -moz-user-select: none; cursor: default;" width="600" height="600"></canvas>
    </div>

as said in the fabric.js documentation serialization tried to save the canvas as json, but am unable to get the objects in the canvas it always returns empty as follows

{"objects":[],"background":""}

and my code to generate the json is follow

var canvas = new fabric.Canvas('design-stage');
console.log(canvas);
var json = JSON.stringify( canvas.toJSON()  );
console.log(json);

Code to add the images on canvas

self._loadItemImage = function (url) { 
fabric.Image.fromURL(url, function (img) { 
var w = img.width; var h = img.height;
 var size = self._resizeImage(w, h, self._width - 100, self._height - 100); 
 img.set({ left: self._width / 2, top: self._height / 2, originX: 'center', originY: 'center', hasBorders: false, hasControls: false, hasRotatingPoint: false, selectable: false, scaleX: 0.5, scaleY: 0.5 }); 
 self._motorImg = img; 
 self._canvas.add(self._motorImg);
 }); 
 };

Note: Am not created objects using the functions in the fabric.js, i have loaded the svg images from a directory and added those images into the canvas by positioning the images

Answer 1

fabric.Image.fromURL does some asynchronous stuff inside. The callback ( function (img) { ... } ) in your code will be called after the image is loaded. Though I cannot see the rest of the code I am sure you are calling JSON.stringify(canvas) right after calling fabric.Image.fromURL and are not waiting for the asynchronous image loading to complete.

Try this:

function Foo() {
    var self = this;
    self._motorImg = null;
    self._canvas  = new fabric.Canvas('c');

    self._loadItemImage = function (url) { 
        fabric.Image.fromURL(url, function (img) { 
            img.set({ left: 0, top: 0, originX: 'center', originY: 'center' }); 
            self._motorImg = img; 
            self._canvas.add(self._motorImg);

            self.debug('2');
        }); 
    };

    self.debug = function (when) {
        console.log(when, JSON.stringify(self._canvas));
    };


}

var foo = new Foo();
foo._loadItemImage('http://jsfiddle.net/img/logo.png');
foo.debug('1');

What you will surely notice is that foo.debug('1') outputs an empty canvas while foo.debug('2') outputs one where the image was added. Try it yourself here .

On the first debug call function (url) { ... } has not yet been called by fabric.Image.fromURL , thus the canvas is empty. You need to wait for it to be called, just like with any other AJAX request/callback. So any code depending on that image to be loaded has to be called from that callback.