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

注意：我没有使用fabric.js中的函数创建对象，我已经从目录加载了svg图像，并通过定位图像将这些图像添加到画布中

Answer 1

fabric.Image.fromURL里面有一些异步内容。在加载图像后，代码中的回调（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请求/回调一样。因此，必须从该回调调用任何代码，具体取决于要加载的图像。

保存使用fabric.js创建的画布

1 个答案: