要打开选项:使用fabric.js,您可以将fabric.js画布序列化为JSON。
它不仅提供了额外的编辑功能层,还允许您执行以下操作(更不用说以后能够编辑他们的图像):
var canvas = new fabric.Canvas('c');
canvas.add(
new fabric.Rect({ top: 100, left: 100, width: 50, height: 50, fill: '#f55' }),
new fabric.Circle({ top: 140, left: 230, radius: 75, fill: 'green' }),
new fabric.Triangle({ top: 300, left: 210, width: 100, height: 100, fill: 'blue' })
);
现在,当您想要序列化此画布时,只需调用
JSON.stringify
函数即可对织物画布对象进行序列化;
JSON.stringify(canvas);
这将为我们上面的示例提供以下类似的结果:
{
"objects": [
{
"type": "rect",
"left": 100,
"top": 100,
"width": 50,
"height": 50,
"fill": "#f55",
"overlayFill": null,
"stroke": null,
"strokeWidth": 1,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"selectable": true
},
...
]
}
将画布反序列化回其状态的方法是使用:
var canvas = new fabric.Canvas('c');
canvas.loadFromJSON(yourJSONString);
一些额外的资源:
厨房水槽演示 - 查看fabric.js的功能(包括自由绘制;之后修改自由绘制的大小和位置)
主页