如何保存 html 画布，然后在不丢失形状的情况下重新加载它？

Posted 2023-05-07

【中文标题】如何保存 html 画布，然后在不丢失形状的情况下重新加载它？

【英文标题】：How can I save html canvas and then reload it without loosing the shapes?

【发布时间】：2012-11-22 15:29:11

【问题描述】：

我有一个 html5 画布，用户可以在其中添加形状。形状有各种各样的行为——它们可以调整大小，可以移动等等。 我需要保存它，所以我可以稍后重新加载（用户添加形状，保存，关闭浏览器。当他重新打开浏览器时，他应该得到与他之前保存的形状相同的画布。他应该能够移动/调整现有形状的大小并添加新形状）

toDataURL 对我不利，因为它将所有形状的画布转换为图像，因此所有现有形状都丢失了。 有什么方法可以将画布或上下文作为对象保存到数据库并稍后重新加载？

【问题讨论】：

您可以使用像 Fabric.js 这样的画布库开箱即用地进行画布序列化

【参考方案1】：

也许您可以将每个形状的属性存储在 JSON 对象中，并将其存储在 localStorage 中或将其保存到数据库中。像这样的：

var ShapeData = shapes:[]
for(var i = 0; i < shapes.length; i++) 

    var newShape = 
        type : shapes[i].getType(),
        x : shapes[i].getX(),
        y : shapes[i].getY(),
        w : shapes[i].getWidth(),
        h : shapes[i].getHeight(),
        rot : shapes[i].getRotation()
    

    ShapeData.shapes[i] = newShape;



var toTheDatabase = JSON.stringify(ShapeData);

看起来像这样：

var ShapeData = 
    "shapes" : [
        "type":"square",
        "x":"10",
        "y":"40",
        "w":"2",
        "h":"90",
        "rot":"140"
    ,
       "type":"circle",
        "x":"60",
        "y":"100",
        "w":"2",
        "h":"90",
        "rot":"0"
    ]