Fabric.js는 JavaScript 기반의 HTML5 캔버스 라이브러리로서, 그래픽 객체와 이벤트 처리 기능을 제공합니다. 이러한 기능을 활용하여 캔버스의 상태를 저장하고 불러오는 방법을 알아보겠습니다.

캔버스 상태 저장하기

Fabric.js에서는 toJSON() 메서드를 사용하여 캔버스의 현재 상태를 JSON 형식으로 저장할 수 있습니다. 이 메서드는 캔버스의 객체들을 직렬화하여 JSON 형식으로 반환합니다.

var canvas = new fabric.Canvas('canvas');

// 캔버스에 그래픽 객체 추가
var circle = new fabric.Circle({ radius: 50, fill: 'red', left: 50, top: 50 });
canvas.add(circle);

// 캔버스 상태 저장
var canvasData = JSON.stringify(canvas.toJSON());

위의 예시 코드에서 canvas.toJSON() 메서드를 호출하고, 반환된 값을 JSON.stringify() 메서드를 통해 JSON 문자열로 변환하여 canvasData 변수에 저장합니다.

캔버스 상태 불러오기

저장된 캔버스 상태를 다시 불러오기 위해서는 loadFromJSON() 메서드를 사용합니다. 이 메서드는 캔버스 객체를 입력받은 JSON 형식으로 초기화합니다.

var canvas = new fabric.Canvas('canvas');

// 저장된 캔버스 상태 불러오기
canvas.loadFromJSON(canvasData, function () {
  // 캔버스 불러오기 완료 시 실행할 코드
  canvas.renderAll();
});

위의 예시 코드에서 canvas.loadFromJSON() 메서드를 호출할 때 첫 번째 인자로 저장된 캔버스 상태가 담긴 JSON 문자열을 전달합니다. 그리고 두 번째 인자로는 캔버스 불러오기가 완료된 후 실행할 콜백 함수를 전달합니다.

요약

Fabric.js에서는 toJSON() 메서드를 사용하여 캔버스의 상태를 JSON 형식으로 저장하고, loadFromJSON() 메서드를 사용하여 저장된 상태를 다시 불러올 수 있습니다. 이를 활용하면 캔버스의 상태를 쉽게 저장하고 관리할 수 있습니다.

더 자세한 내용은 Fabric.js 공식 문서를 참고하시기 바랍니다.