Fabric.js - 如何使用自定义属性在服务器上保存画布

我希望能够将当前画布的状态保存到服务器端数据库，可能作为 JSON 字符串，然后使用以下命令恢复它loadFromJSON。通常，这可以使用以下方法轻松完成：

var canvas = new fabric.Canvas();
function saveCanvas() {
    // convert canvas to a json string
    var json = JSON.stringify( canvas.toJSON() );

    // save via xhr
    $.post('/save', { json : json }, function(resp){ 
        // do whatever ...
    }, 'json');
}

进而

function loadCanvas(json) {

  // parse the data into the canvas
  canvas.loadFromJSON(json);

  // re-render the canvas
  canvas.renderAll();

  // optional
  canvas.calculateOffset();
}

但是，我还使用内置函数在要添加到画布的织物对象上设置了一些自定义属性Object#set method:

// get some item from the canvas
var item = canvas.item(0);

// add misc properties
item.set('wizard', 'gandalf');
item.set('hobbit', 'samwise');

// save current state
saveCanvas();

问题是，当我在服务器端检查请求时，我发现我的自定义属性没有从画布中解析并与其他所有内容一起发送。这可能与如何toObject方法删除对象类中非默认属性的所有内容。解决这个问题的好方法是什么，这样我就能够同时保存and从服务器发送的 JSON 字符串恢复画布，恢复的画布还将包含我的自定义属性？谢谢。

好问题。

如果您向对象添加自定义属性，这些对象可能在某种程度上是“特殊的”。似乎对它们进行子类化是一个合理的解决方案。

例如，下面是我们如何子类化一个fabric.Image到命名图像中。这些图像对象可以有“Gandalf”或“Samwise”等名称。

fabric.NamedImage = fabric.util.createClass(fabric.Image, {

  type: 'named-image',

  initialize: function(element, options) {
    this.callSuper('initialize', element, options);
    options && this.set('name', options.name);
  },

  toObject: function() {
    return fabric.util.object.extend(this.callSuper('toObject'), { name: this.name });
  }
});

首先，我们给这些对象一个类型。该类型用于loadFromJSON自动调用fabric.<type>.fromObject方法。在这种情况下，它将是fabric.NamedImage.fromObject.

然后我们覆盖initialize（构造函数）实例方法，在初始化对象时还设置“name”属性（如果给出了该属性）。

然后我们覆盖toObject实例方法在返回的对象中包含“名称”（这是结构中对象序列化的基石）。

最后，我们还需要实现fabric.NamedImage.fromObject我之前提到过，所以loadFromJSON会知道在 JSON 解析期间调用哪个方法：

fabric.NamedImage.fromObject = function(object, callback) {
  fabric.util.loadImage(object.src, function(img) {
    callback && callback(new fabric.NamedImage(img, object));
  });
};

我们在这里加载一个图像（来自“object.src”），然后创建一个实例fabric.NamedImage出来了。请注意，此时构造函数将已经处理“名称”设置，因为我们之前覆盖了“初始化”方法。

我们还需要指定fabric.NamedImage是一个异步“类”，这意味着它fromObject不返回实例，而是将其传递给回调：

fabric.NamedImage.async = true;

现在我们可以尝试一下：

// create image element
var img = document.createElement('img');
img.src = 'https://www.google.com/images/srpr/logo3w.png';

// create an instance of named image
var namedImg = new fabric.NamedImage(img, { name: 'foobar' });

// add it to canvas
canvas.add(namedImg);

// save json
var json = JSON.stringify(canvas);

// clear canvas
canvas.clear();

// and load everything from the same json
canvas.loadFromJSON(json, function() {

  // making sure to render canvas at the end
  canvas.renderAll();

  // and checking if object's "name" is preserved
  console.log(canvas.item(0).name);
});