html 캔버스를 저장 한 다음 모양을 잃지 않고 다시로드하려면 어떻게해야합니까?

Question

사용자가 도형을 추가 할 수있는 html5 캔버스가 있습니다. 셰이프에는 모든 종류의 동작이 있습니다. 크기를 조정할 수 있으며 주위를 이동할 수 있습니다. 저장해야하므로 나중에 다시로드 할 수 있습니다. 사용자가 셰이프를 저장하고 저장하고 브라우저를 닫았습니다. 브라우저를 다시 열면 다시로드해야합니다. 이전에 저장 한 도형으로 같은 캔버스를 가져와야합니다. 기존 도형을 이동/크기 조정하고 새 도형을 추가 할 수 있어야합니다.

toDataURL은 모든 모양이있는 캔바스를 이미지이므로 기존의 모든 모양이 손실됩니다. 캔버스 또는 개체를 db로 저장하고 나중에 다시로드 할 수있는 방법이 있습니까?

Answer 1

아마도 JSON 개체에 각 도형의 특성을 저장하고 localStorage에 저장하거나 DB에 저장할 수 있습니다. 이런 식으로 뭔가 :

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

이 같을 것이다 : 당신은 [Fabric.js] 같은 캔버스 라이브러리와 상자 밖으로 캔버스 직렬화를 얻을 수

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" 
    }] 
}