使用fabric.js在canvas中加载JSON [英] Loading JSON in canvas with fabric.js

查看：1663
本文介绍了使用fabric.js在canvas中加载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：意外字符
 [打破此错误] var Cufon =（function（）{var k = function（）.... Image.fromElement.async = true} ）（这个）;

当我使用我自己的JSON，它验证很好，但我仍然得到错误时，输出结构的方法canvas.toJSON（）。任何人都会有工作示例加载到从fabric.js中的前一个画布状态保存的空画布数据？非常感谢！

解决方案

fabric.Canvas＃toJSON 返回一个对象，而不是JSON字符串。



对不起，如果这是混乱。



这是因为 JSON.stringify 的原因。关于 JSON.stringify 的事情是它支持自定义序列化;所有你需要做的是传递一个具有 toJSON 方法的对象。这正是我在面料 - 织物做的.Canvas有 toJSON 方法，这本质上是 toObject的别名方法。



这使我们可以通过做一些简单的操作来序列化canvas：

  JSON.stringify（canvas）;

..其中 canvas fabric.Canvas 实例。



toObject 和 toDatalessObject （以及 toJSON 和 toDatalessJSON ） toDatalessObject 返回url而不是实际路径数据。这是为了节省大尺寸的画布表示与大尺寸的形状。如果加载大的SVG形状，其路径数据可能会导致数百万个字符串。如果以后需要序列化这些数据（例如，为了节省目的），用svg shape的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 
} 
  pre> 
 
 
您将拥有：
  {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 
} 
  
 $ b b 
 
请注意数据有多大，以及用url替换路径块会有多小。
 
 
 
这是一个非常简单的形状。 
 
 
 
这里唯一的要求是在调用之前使用 setSourcePath 方法设置对象的sourcePath toDatalessObject  /  toDatalessJSON （sourcePath内部复制到路径）。
 
 
 
希望这会清除一些东西。
 
I am trying to save data in JSON and load it back into the canvas with fabric.js I keep getting errors likep with the following simple code:
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!
 解决方案 
fabric.Canvas#toJSON actually returns an object, not a JSON string.



Sorry, if this is confusing. 



The reason this works like that is due to JSON.stringify. The thing about JSON.stringify is that it supports custom serialization; all you need to do is pass an object that has toJSON method. And this is exactly what I did in fabric — fabric.Canvas has toJSON method, which is essentially an alias to toObject method.



This allows us to serialize canvas by doing something as simple as:
JSON.stringify(canvas);

.. where canvas is a reference to fabric.Canvas instance.



The difference between toObject and toDatalessObject (as well as toJSON and toDatalessJSON) is that toDatalessObject returns "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.



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.



And that's a representation of a very simple shape. 



The only requirement here is to set object's "sourcePath" using setSourcePath method before calling toDatalessObject/toDatalessJSON on it ("sourcePath" is internally copied to "path").



Hope this clears things up a little.


                        
这篇关于使用fabric.js在canvas中加载JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆