Сохранить холст создан с fabric.js

Question

я хочу, чтобы сохранить холст сгенерированный с fabric.js, у меня есть холст, как, как показано ниже на моей странице

<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> 

как сказано в документации fabric.js serialization попытался сохранить холст как JSON, но я не смог получить объекты в полотне всегда возвращается пустой следующим

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

и мой код для генерации JSON, следуют

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

кода для добавления изображения на холсте

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

Примечания: Am не создаются объекты с помощью функции в fabric.js, я загрузил SVG изображения из каталога и добавил эти изображения в холст позиционирование изображений

Answer 1

fabric.Image.fromURL делает некоторые асинхронный материал внутри. callback (function (img) { ... }) в вашем коде будет называться после изображение загружается. Хотя я не могу видеть остальную часть кода, я уверен, что вы вызываете JSON.stringify(canvas) сразу после звонка fabric.Image.fromURL и не ожидания для загрузки асинхронного изображения.

Попробуйте это:

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'); 

То, что вы наверняка заметите, что foo.debug('1') выводит пустой холст в то время как foo.debug('2') выводит один, где был добавлен образ. Попробуйте сами here.

Сперва debug звонок function (url) { ... } еще не был вызван fabric.Image.fromURL, поэтому холст пуст. Вам нужно подождать, пока он будет вызван, как и любой другой запрос/обратный вызов AJAX. Итак, любой код в зависимости от того, какое изображение должно быть загружено, должно быть вызвано из этого обратного вызова.