Javascript 使用fabric.js在画布中加载JSON

我试图用JSON保存数据，并使用fabric.js将其加载回画布中。我不断收到错误，如以下简单代码中的错误：

canvas.add(new fabric.Rect({ width: 50, height: 50, fill: 'red', top: 100, left: 100 }));
var c = canvas.toJSON();
canvas.clear();
canvas.loadFromJSON(c);

我得到：

SyntaxError: JSON.parse: unexpected character
[Break On This Error] var Cufon=(function(){var k=function()....Image.fromElement.async=true})(this);

当我使用自己的JSON时，它可以很好地验证，但当我使用fabric的方法canvas.toJSON（）输出的内容时，仍然会出现错误。任何人都会有将fabric.js中先前画布状态保存的数据加载回空画布的工作示例？非常感谢

fabric.Canvas#toJSON

实际上返回一个对象，而不是JSON字符串

对不起，如果这让人困惑的话

之所以如此，是因为

JSON.stringify

。关于

JSON.stringify

的一点是，它支持自定义序列化；您所需要做的就是传递一个具有

toJSON

方法的对象。这正是我在fabric-fabric.Canvas中所做的，它有

toJSON

方法，本质上是

toObject

方法的别名

这允许我们通过执行以下简单操作来序列化画布：

JSON.stringify(canvas);

。。其中

canvas

是对

fabric.canvas

实例的引用

toObject

和

toDatalessObject

（以及

toJSON

和

toDatalessJSON

）之间的区别在于

toDatalessObject

返回“url”而不是实际的路径数据。这样做是为了节省大尺寸形状的画布表示的大小。如果加载大型SVG形状，其路径数据可能会产生数百万个字符串。如果您以后需要序列化这些数据（例如，为了保存目的），那么将路径数据替换为svg形状的URL会更有意义。想象一下，必须将如此巨大的字符串来回上传/下载到服务器

因此，与此相反：

{ "angle" : 3,
  "fill" : "#00274D",
  "flipX" : false,
  "flipY" : false,
  "height" : 115,
  "left" : 353,
  "opacity" : 1,
  "overlayFill" : null,
  "path" : [ [ "M",
        67.390000000000001,
        22.390000000000001
      ],
      [ "c",
        2.5899999999999999,
        -0.42999999999999999,
        5.1100000000000003,
        1.4399999999999999,
        5.54,
        4.1799999999999997
      ],
      [ "c",
        0.42999999999999999,
        2.6600000000000001,
        -1.3,
        5.2599999999999998,
        -3.8900000000000001,
        5.6900000000000004
      ],
      [ "c",
        -1.8,
        0.28999999999999998,
        -3.6000000000000001,
        -0.57999999999999996,
        -4.6100000000000003,
        -2.02
      ],
      [ "L",
        44.5,
        34.560000000000002
      ],
      [ "l",
        10.869999999999999,
        59.619999999999997
      ],
      [ "c",
        17.420000000000002,
        -4.46,
        26.059999999999999,
        -14.18,
        27.5,
        -29.02
      ],
      [ "l",
        -10.01,
        -0.71999999999999997
      ],
      [ "L",
        88.700000000000003,
        51.909999999999997
      ],
      [ "l",
        9.4299999999999997,
        21.239999999999998
      ],
      [ "c",
        -3.3799999999999999,
        -1.95,
        -5.9000000000000004,
        -5.1100000000000003,
        -9.2899999999999991,
        -7.0599999999999996
      ],
      [ "c",
        -0.28999999999999998,
        25.059999999999999,
        -27.140000000000001,
        32.759999999999998,
        -33.770000000000003,
        47.950000000000003
      ],
      [ "C",
        44.420000000000002,
        100.08,
        26.5,
        114.77,
        6.9100000000000001,
        82.799999999999997
      ],
      [ "L",
        0,
        92.450000000000003
      ],
      [ "l",
        1.51,
        -21.600000000000001
      ],
      [ "l",
        19.66,
        4.6799999999999997
      ],
      [ "l",
        -9.4299999999999997,
        3.6699999999999999
      ],
      [ "c",
        7.4900000000000002,
        11.59,
        17.57,
        19.870000000000001,
        36.43,
        16.420000000000002
      ],
      [ "L",
        36.219999999999999,
        36.57
      ],
      [ "l",
        -18.649999999999999,
        2.3799999999999999
      ],
      [ "c",
        -0.14000000000000001,
        2.1600000000000001,
        -1.73,
        4.0300000000000002,
        -3.8900000000000001,
        4.3899999999999997
      ],
      [ "c",
        -2.5899999999999999,
        0.42999999999999999,
        -5.04,
        -1.4399999999999999,
        -5.54,
        -4.0999999999999996
      ],
      [ "c",
        -0.42999999999999999,
        -2.7400000000000002,
        1.3,
        -5.2599999999999998,
        3.8900000000000001,
        -5.6900000000000004
      ],
      [ "c",
        1.9399999999999999,
        -0.35999999999999999,
        3.8900000000000001,
        0.65000000000000002,
        4.9000000000000004,
        2.2999999999999998
      ],
      [ "l",
        17.93,
        -4.8200000000000003
      ],
      [ "l",
        -1.3700000000000001,
        -6.8399999999999999
      ],
      [ "c",
        -4.8200000000000003,
        -0.79000000000000004,
        -8.9299999999999997,
        -4.75,
        -9.7899999999999991,
        -10.08
      ],
      [ "c",
        -1.1499999999999999,
        -6.6200000000000001,
        3.1000000000000001,
        -12.890000000000001,
        9.4299999999999997,
        -13.970000000000001
      ],
      [ "c",
        6.4100000000000001,
        -1.01,
        12.460000000000001,
        3.46,
        13.539999999999999,
        10.08
      ],
      [ "c",
        0.85999999999999999,
        5.1799999999999997,
        -1.5800000000000001,
        10.15,
        -5.6900000000000004,
        12.6
      ],
      [ "l",
        1.8700000000000001,
        6.1200000000000001
      ],
      [ "l",
        20.739999999999998,
        -2.8799999999999999
      ],
      [ "C",
        64.010000000000005,
        24.260000000000002,
        65.519999999999996,
        22.75,
        67.390000000000001,
        22.390000000000001
      ],
      [ "L",
        67.390000000000001,
        22.390000000000001
      ],
      [ "z" ],
      [ "M",
        33.909999999999997,
        5.1799999999999997
      ],
      [ "c",
        -3.46,
        0.57999999999999996,
        -5.7599999999999998,
        3.96,
        -5.1100000000000003,
        7.5599999999999996
      ],
      [ "c",
        0.57999999999999996,
        3.6000000000000001,
        3.8900000000000001,
        6.0499999999999998,
        7.2699999999999996,
        5.4699999999999998
      ],
      [ "c",
        3.46,
        -0.57999999999999996,
        5.7599999999999998,
        -3.96,
        5.1799999999999997,
        -7.5599999999999996
      ],
      [ "C",
        40.609999999999999,
        7.0499999999999998,
        37.369999999999997,
        4.6100000000000003,
        33.909999999999997,
        5.1799999999999997
      ],
      [ "z" ]
    ],
  "scaleX" : 3.0299999999999998,
  "scaleY" : 3.0299999999999998,
  "selectable" : true,
  "stroke" : null,
  "strokeWidth" : 1,
  "top" : 220,
  "type" : "path",
  "width" : 99
}

你可以这样做：

{ "angle" : 3,
  "fill" : "#00274D",
  "flipX" : false,
  "flipY" : false,
  "height" : 115,
  "left" : 353,
  "opacity" : 1,
  "overlayFill" : null,
  "path" : "http://example.com",
  "scaleX" : 3.0299999999999998,
  "scaleY" : 3.0299999999999998,
  "selectable" : true,
  "stroke" : null,
  "strokeWidth" : 1,
  "top" : 220,
  "type" : "path",
  "width" : 99
}

请注意，通过用url替换路径块，该数据有多大，以及相对较小

这是一个非常简单形状的表示

这里唯一的要求是在调用对象上的

toDatalessObject

/

toDatalessJSON

之前，使用

setSourcePath

方法设置对象的“sourcePath”（“sourcePath”在内部复制到“path”）

---

希望这能把事情弄清楚一点。

谢谢。我现在理解了“无数据”方面。太好了。但是，我无法将JSON.stringify（canvas）的结果加载回画布。我已经做了很多工作，但我很想知道正确的方法。下面是我尝试过但失败的地方：

var js=JSON.stringify（canvas）；canvas.clear（）；loadFromJSON（js）我得到了解决方法的引用错误，我保存了JSON，然后遍历它，查看每个对象的类型，创建一个对应类型的新结构对象，用JSON中的参数初始化它，然后添加它…嗯
loadFromJSON
应该可以工作。你们有我可以看的测试用例吗？是的，我在那个里放了一个小演示：非常感谢！只要用
savedDataDLJSON=JSON.stringify（c1.toDatalessJSON（））
替换
savedDataDLJSON=c1.toDatalessJSON（）
。谢谢@kangax，我刚才这么做了。仍然不起作用。当我尝试加载stringized datalessJSON或sringized JSON时，我得到
camelize未在fabric/all-min.js:7中定义。六羟甲基三聚氰胺六甲醚。。。我想知道我做错了什么？很抱歉给你添了这么多麻烦。。。