将 html5 canvas 数据保存为对象的最佳方式

Question

我正在开发一个 html5 canvas 应用程序，您可以用它构建一个房间，它有一些可拖动的工具，例如从数据库中提取的房间家具。

现在我知道我可以使用以下方法将 canvas 保存为 png 图像：

  // save canvas image as data url (png format by default)
  var dataURL = canvas.toDataURL();

但我想保存 canvas 的表示而不是它的外观！像一个物体或其他东西，最好的方法是什么？

Answer 1

使用JSON到save/restore你的房间

创建一个房间数组，其中包含该房间中包含的所有家具对象：

var room=[];

room.push({x:20,y:150,furniture:'couch'});
room.push({x:30,y:250,furniture:'table'});
room.push({x:40,y:350,furniture:'chair'});

然后您可以使用 JSON.stringify.
将该家具对象数组保存到字符串中
```
var roomAsString=JSON.stringify(room);
```
现在您的房间已存储为字符串，您可以将其保存到数据库中（可能使用 AJAX）。
需要时，从数据库中检索字符串（可能使用 AJAX）。
检索字符串后，您可以使用它重新创建房间数组 JSON.parse。
```
var room=JSON.parse(roomAsString);
```

最后根据房间数组中的家具对象重新绘制房间。

Best way to save html5 canvas data as object