javascript - Fabricjs .toJSON() 无法正确保存到 LocalStorage ([object Object])

Question

我正在使用 FabricJS，我想在“卸载”事件中将结果画布保存在 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));
        }
    });

我正在寻找一种方法来保存画布，而无需在返回时更改对象结构。或者一种方法，以便在检索 JSON 时，我可以对其进行编辑，以便将其重新绘制到画布中。

标签： javascriptlocal-storagefabricjs

Answer 1

因此，似乎 Stringify 格式或 Parse 函数不是真正的问题，问题是我无意中覆盖了我添加到画布的每个对象的“类型”属性，这是“不渲染”的原因问题，因为 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))
    }
});