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

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

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

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

---

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

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

创建包含该房间中包含的所有家具对象的房间阵列：

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

---

最后，根据房间阵列中的家具对象重新绘制房间。

如果“另存为对象”，您的意思是拥有重建图像所需的信息，则需要在创建画布时创建对象。请查看DOM中类似的框架源“一切都是节点”。我们对元素eq.element.addEventListner（）使用函数（方法），因为它们都是对象。正如@AlexanderO'Mara所说，你可以使用克隆方法获得重建所需的信息。因此，我必须自己手动构建所有内容，画布本身没有表示形式？是的……不是……你毕竟是程序员；-）