Fabricjs .toJSON () не сохраняется правильно в LocalStorage ([объект объекта]) - PullRequest
Новая
       16

Fabricjs .toJSON () не сохраняется правильно в LocalStorage ([объект объекта])

0 голосов
/ 14 мая 2019

Я использую FabricJS и хочу сохранить полученный холст на LocalStorage при событии 'выгрузки', после чего при перезагрузке страницы я хочу загрузить полученный JSON из localStorage на свой холст.

Я могупосмотрите, что результирующий объект функции .toJSON() фабрики действительно является объектом, который пытается использовать JSON.stringify(myObject) для сохранения в LocalStorage, вызывает проблемы при попытке перерисовки холста, потому что он изменяет структуру JSON.

    $( window ).bind('beforeunload', function() {
        const myObject = canvas.toJSON();
        localStorage.setItem('design', canvas.toJSON());
    });

    $(document).ready(function () {
        if (localStorage.getItem("design") !== null) {
            const json = localStorage.getItem("design");
            canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));
        }
    });

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

1 Ответ

0 голосов
/ 14 мая 2019

Итак, похоже, что формат Stringify или функция Parse не были настоящей проблемой, проблема заключалась в том, что я неумышленно перезаписывал атрибут 'type' каждого объекта, который я добавил на холст, это было причиной " проблема «не рендеринга», потому что функция фабрики loadFromJSON использует атрибут type для создания объектов внутри холста. Окончательный код: 

$( window ).bind('beforeunload', function() {
    const json = canvas.toJSON();
    localStorage.setItem('design', JSON.stringify(json));
});

$(document).ready(function () {
    if (localStorage.getItem("design") !== null) {
        const json = localStorage.getItem("design");
        canvas.loadFromJSON($.parseJSON(json), canvas.renderAll.bind(canvas))
    }
});
...