Fabricjs .toJSON() 没有正确保存到 LocalStorage ([object Object])

Question

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

我可以看到 fabricjs 的 .toJSON() 函数的结果对象确实是一个对象，尝试使用 JSON.stringify(myObject)，保存到 LocalStorage 在尝试重新绘制 canvas 因为它改变了 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));
        }
    });

我正在寻找一种方法来保存 canvas，而无需在返回时更改对象结构。或者一种方法，当 JSON 被检索时，我可以编辑它，这样它就可以重新绘制到 canvas.

Answer 1

所以，似乎 Stringify 格式或 Parse 函数不是真正的问题，问题是我无意中覆盖了我添加到 canvas 的每个对象的 'type' 属性，这是 "not rendering" 问题的原因，因为 loadFromJSON fabricjs 函数利用类型属性在 canvas 中创建对象。最终代码：

$( 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 ([object Object])

Fabricjs .toJSON() doesn't save correctly to LocalStorage ([object Object])

javascript

local-storage

fabricjs