javascript 使用 fabric.js 在画布中加载 JSON
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6886984/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Loading JSON in canvas with fabric.js
提问by Regis Zaleman
I am trying to save data in JSON and load it back into the canvas with fabric.jsI keep getting errors likep with the following simple code:
我正在尝试将数据保存在 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);
I get:
我得到：
SyntaxError: JSON.parse: unexpected character
[Break On This Error] var Cufon=(function(){var k=function()....Image.fromElement.async=true})(this);
When I use my own JSON, It validates well, but I still get errors when I use whatever was output by fabric's method canvas.toJSON(). Anyone would have working examples of loading back into an empty canvas data saved from a previous canvas state in fabric.js? It would be greatly appreciated!
当我使用我自己的 JSON 时，它验证得很好，但是当我使用fabric 的方法 canvas.toJSON() 输出的任何内容时，我仍然会遇到错误。任何人都会有从fabric.js 中以前的画布状态保存的空画布数据加载回的工作示例吗？这将不胜感激！
回答by kangax
fabric.Canvas#toJSONactually returns an object, not a JSON string.
fabric.Canvas#toJSON实际上返回一个对象，而不是一个 JSON 字符串。
Sorry, if this is confusing.
对不起，如果这令人困惑。
The reason this works like that is due to JSON.stringify. The thing about JSON.stringifyis that it supports custom serialization; all you need to do is pass an object that has toJSONmethod. And this is exactly what I did in fabric — fabric.Canvas has toJSONmethod, which is essentially an alias to toObjectmethod.
这样做的原因是由于JSON.stringify. 问题JSON.stringify在于它支持自定义序列化；您需要做的就是传递一个具有toJSON方法的对象。这正是我在fabric 中所做的——fabric.Canvas 有toJSON方法，它本质上是toObject方法的别名。
This allows us to serialize canvas by doing something as simple as:
这允许我们通过做一些简单的事情来序列化画布：
JSON.stringify(canvas);
.. where canvasis a reference to fabric.Canvasinstance.
.. 哪里canvas是对fabric.Canvas实例的引用。
The difference between toObjectand toDatalessObject(as well as toJSONand toDatalessJSON) is that toDatalessObjectreturns "url" instead of actual path data. This is done to save on size of canvas representation with shapes of large size. If you load large SVG shape, its path data could literally result in multi-million character string. If you later need to serialize this data (say, for saving purposes), it makes much more sense to replace path data with URL of svg shape. Just imagine having to upload/download such huge strings to the server back and forth.
toObjectand toDatalessObject（以及toJSONand toDatalessJSON）之间的区别在于toDatalessObject返回“url”而不是实际路径数据。这样做是为了节省具有大尺寸形状的画布表示的尺寸。如果加载大型 SVG 形状，其路径数据可能会产生数百万个字符串。如果您以后需要序列化这些数据（例如，为了保存目的），用 svg 形状的 URL 替换路径数据更有意义。想象一下必须来回上传/下载如此巨大的字符串到服务器。
So, instead of this:
所以，而不是这个：
{ "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
}
you would have this:
你会有这个：
{ "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
}
Notice how large that data is, and how relatively small it becomes by replacing path chunk with url.
请注意该数据有多大，以及通过用 url 替换路径块而变得相对较小。
And that's a representation of a very simple shape.
这是一个非常简单的形状的表示。
The only requirement here is to set object's "sourcePath" using setSourcePathmethod before calling toDatalessObject/toDatalessJSONon it ("sourcePath" is internally copied to "path").
这里唯一的要求是setSourcePath在调用toDatalessObject/之前使用方法设置对象的“sourcePath” toDatalessJSON（“sourcePath”在内部复制到“path”）。
Hope this clears things up a little.
希望这能让事情变得更清楚一点。
