Fabric.js - как да запазите canvas на сървър с потребителски атрибути

Добър въпрос.

Ако добавяте персонализирани свойства към обекти, тези обекти вероятно са „специални“ по някакъв начин. Изглежда, че подкласирането им би било разумно решение.

Например, ето как бихме подкласирали 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 (конструктор) метод на екземпляр, за да зададем и свойството "name" при инициализиране на обект (ако това свойство е дадено).

След това презаписваме 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 от него. Обърнете внимание как в този момент конструкторът вече ще се погрижи за настройката на "name", тъй като презаписахме метода "initialize" по-рано.

И също така ще трябва да уточним, че 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.

По-прост подход би бил да добавите свойствата след 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(), и не искате да използвате сложен подход за подкласиране, ето един много прост начин за разширяване на метода toObject на Fabric.

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