Ich möchte in der Lage sein, den aktuellen Status des Erstellungsbereichs in einer serverseitigen Datenbank zu speichern, wahrscheinlich als JSON-Zeichenfolge, und ihn dann später mit wiederherzustellenloadFromJSON. In der Regel lässt sich dies leicht mit folgenden Mitteln erreichen:

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

Und dann

function loadCanvas(json) {

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

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

  // optional
  canvas.calculateOffset();
}

Ich habe jedoch auch einige benutzerdefinierte Attribute für die Fabric-Objekte festgelegt, die ich mithilfe der integrierten Funktion zur Zeichenfläche hinzufügeObject#set Methode:

// 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();

Das Problem ist, dass ich beim Überprüfen der Anforderung auf der Serverseite feststelle, dass meine benutzerdefinierten Attribute nicht aus dem Erstellungsbereich analysiert und zusammen mit allem anderen gesendet wurden. Das hat wahrscheinlich damit zu tun, wietoObject Methode entfernt alles, was kein Standardattribut in der Objektklasse ist. Was wäre ein guter Weg, um dieses Problem anzugehen, so dass ich in der Lage sein werde, beide zu rettenund Stellen Sie die Zeichenfläche aus einer vom Server gesendeten JSON-Zeichenfolge wieder her. Enthält die wiederhergestellte Zeichenfläche auch meine benutzerdefinierten Attribute? Vielen Dank.