使用 fabric.js 在画布中加载 JSON
Posted
技术标签:
【中文标题】使用 fabric.js 在画布中加载 JSON【英文标题】：Loading JSON in canvas with fabric.js 【发布时间】：2011-10-16 18:00:26 【问题描述】：我正在尝试以 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中以前的画布状态保存的空画布数据的工作示例？将不胜感激！
【问题讨论】：
【参考方案1】：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(); canvas.loadFromJSON(js); 我得到 reference error 对于我的解决方法，我保存 JSON，然后遍历它，查看每个对象的类型，创建一个新的 fabric 对象对应类型，用json中的参数初始化，然后添加...
嗯。 loadFromJSON 应该可以工作。你有我可以看的测试用例吗？
是的，我放了一个小演示：regiszaleman.com/testfabric 非常感谢！
只需将savedDataDLJSON = c1.toDatalessJSON() 替换为savedDataDLJSON = JSON.stringify(c1.toDatalessJSON())。
谢谢@kangax，我刚刚做到了。还是行不通。当我尝试加载字符串化的 datalessJSON 或字符串化的 JSON 时，我得到camelize is not defined in fabric/all-min.js:7。嗯...我想知道我做错了什么？并为所有的麻烦感到抱歉...以上是关于使用 fabric.js 在画布中加载 JSON的主要内容，如果未能解决你的问题，请参考以下文章