javascript - 将 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 保存/恢复您的房间

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

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