Question

我正在使用FabricJS，我想在'unloading'事件中将生成的画布保存在LocalStorage上，然后在重新加载页面时，我要将生成的JSON从localStorage加载到画布上。

我可以看到Fabricjs的.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));
        }
    });

我正在寻找一种方法，可以保存画布而不改变返回对象时的Object结构。或者这样一种方式，当检索JSON时，我可以对其进行编辑，以便可以将其重新绘制到画布中。

Answer 1

因此，看来Stringify格式或Parse函数并不是真正的问题，问题在于我无意中覆盖了添加到画布上的每个对象的'type'属性，这就是“ “未呈现”问题，因为loadFromJSON fabricjs函数利用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))
    }
});

Fabricjs .toJSON（）无法正确保存到LocalStorage（[对象对象]）

1 个答案: