将html5画布数据保存为对象的最佳方法

Question

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

现在我知道我可以使用以下方法将画布保存到png图像：

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

但我想保存画布的表示而不是它的外观！像对象或东西一样，最好的方法是什么？

Answer 1

使用JSON保存/恢复您的房间

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

   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'});
   

2. 然后，您可以使用JSON.stringify将该家具对象数组保存到字符串中。

   var roomAsString=JSON.stringify(room);
   

3. 现在您的房间存储为字符串，您可以将其保存到数据库中（可能使用AJAX）。

4. 需要时，从数据库中检索字符串（可能使用AJAX）。

5. 检索字符串后，您可以使用它来使用JSON.parse重新创建房间数组。

   var room=JSON.parse(roomAsString);
   

最后根据房间阵列中的家具物品重新绘制房间。