Сериализация и десериализация холста с объектами изображения (Fabricjs)

Question

Я использую fabric.js для добавления объекта изображения в холст. Сериализация работает нормально, но после десериализации объект canvas пуст. console.log (JSON.stringify (холст)) возвращает: { "объекты": [], "фон": ""}

вот мой код:

var canvas = new fabric.Canvas('goCanvas'); 

fabric.Image.fromURL("rooryteam03da088a.jpeg", function(oImg) { 
     canvas.add(oImg); 
}); 

var serialized = JSON.stringify(canvas); 

canvas.clear(); 

canvas.loadFromDatalessJSON(serialized); 

console.log(JSON.stringify(canvas)); 

Я также попытался loadFromJSON вместо loadFromDatalessJSON для десериализации, но без результата. Итак, что я делаю неправильно?

Answer 1

fabric.Image.fromURL is асинхронный. Вы stringify полотна до получения изображения, вы должны переместить этот код на грузовом изображение обратного вызова:

var canvas = new fabric.Canvas('goCanvas'); 

fabric.Image.fromURL("rooryteam03da088a.jpeg", function(oImg) { 
    canvas.add(oImg); 

    var serialized = JSON.stringify(canvas); 
    canvas.clear(); 
    canvas.loadFromDatalessJSON(serialized); 
    console.log(JSON.stringify(canvas)); 
}); 

Answer 2

Переменных сериализованные становится ссылкой на объект холст. Когда вы вызываете canvas.clear(), вы очищаете холст, и, таким образом, ваша переменная сериализуется, а какие холсты ссылок также становятся пустыми.

Я не выполняю то, что вы пытаетесь достичь, поскольку вы очищаете холст только для добавления к нему того же содержимого, поэтому не знаете, как предложить альтернативный вариант.