Fabric.js — как сохранить холст на сервере с настраиваемыми атрибутами

Хороший вопрос.

Если вы добавляете настраиваемые свойства к объектам, эти объекты, вероятно, в некотором роде «особенные». Кажется, что их подклассы были бы разумным решением.

Например, вот как мы можем создать подкласс fabric.Image для именованного изображения. Затем эти объекты изображения могут иметь такие имена, как «Гэндальф» или «Сэмвайз».

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 (конструктор), чтобы также установить свойство «имя» при инициализации объекта (если это свойство задано).

Затем мы перезаписываем метод экземпляра toObject, чтобы включить «имя» в возвращаемый объект (это краеугольный камень сериализации объектов в Fabric).

Наконец, нам также нужно реализовать тот 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);
});

Вот это да. Я что-то упустил здесь?

Я делал это много раз, и мне не нужны какие-то причудливые подклассы.

Это описано в документации: http://fabricjs.com/docs/fabric.Canvas.html#toJSON

Просто включите массив имен свойств в виде строк в свой вызов toJSON().

Eg

canvas.toJSON(['wizard','hobbit']);

Надеюсь... за бонусные очки вы можете добавить функцию оживления, которая восстановит ваши пользовательские атрибуты.

Опять же, это описано в документах и ​​имеет пример.

У меня была такая же проблема, но я не хотел расширять классы Fabric.js.

Я написал функцию, которая принимает в качестве параметра холст ткани и возвращает строковую версию с моими специальными атрибутами:

function stringifyCanvas(canvas)
{
    //array of the attributes not saved by default that I want to save
    var additionalFields = ['selectable', 'uid', 'custom']; 

    sCanvas = JSON.stringify(canvas);
    oCanvas = JSON.parse(sCanvas) ;
    $.each(oCanvas.objects, function(n, object) {
        $.each(additionalFields, function(m, field) {
            oCanvas.objects[n][field] = canvas.item(n)[field];
        });
    });

    return JSON.stringify(oCanvas);     
}

Специальные атрибуты кажутся правильно импортированными, когда я использую canvas.loadFromJSON(), я использую ткань 1.7.2.

Более простым подходом было бы добавить свойства post-stringify:

var stringJson = JSON.stringify(this.canvas);
var objectJson = JSON.parse(string.Json);

//remove property1 property
delete objectJson.property1;

//add property2 property
delete objectJson.property2;

// stringify the object again
stringJson = JSON.stringify(objectJson);

// at this point stringJson is ready to be sent over to the server
$http.post('http://serverurl/',stringJson);

Если вы не хотите указывать настраиваемые атрибуты, которые вы используете каждый раз, когда вызываете canvas.toJSON(), и вы не хотите использовать сложный подход к созданию подклассов, вот очень простой способ расширить метод Fabric toObject.

//EXTEND THE PROPS FABRIC WILL EXPORT TO JSON
fabric.Object.prototype.toObject = (function(toObject) {
    return function() {
        return fabric.util.object.extend(toObject.call(this), {
            id: this.id,
            wizard: this.wizard,
            hobbit: this.hobbit,
        });
    };
})(fabric.Object.prototype.toObject);

Затем вы можете установить пользовательские свойства для объектов Fabric.

item.set("wizard","gandalf");
item.set("hobbit","bilbo");

И когда вы вызываете canvas.toJSON(), эти свойства сохранятся на выходе. Если вы затем используете canvas.loadFromJSON() с выводом JSON, настраиваемые атрибуты будут импортированы и применены к объектам Fabric.