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

最后根据房间

阵列中的家具对象重绘房间。