將html5畫布數據另存為對象的最佳方法

Question

我正在使用html5 canvas應用程序，可以用它構建一個房間，該應用程序具有一些可拖動的工具，例如從數據庫中提取的房間家具。

現在我知道我可以使用以下方法將畫布保存為png圖像：

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

但是我想保存畫布的表示，而不是外觀！ 像物體一樣，什么是最好的方法？

Answer 1

使用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); 
```

最后根據房間陣列中的家具對象重新繪制房間。