Fabric.js는 HTML5 캔버스를 다루는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하여 캔버스에 그린 그림을 이미지 파일로 저장하는 방법에 대해 알아보겠습니다.

1. 캔버스 설정하기

먼저, Fabric.js 라이브러리를 HTML 문서에 포함시키고, 캔버스 요소를 생성합니다. 예를 들면 다음과 같습니다:

<canvas id="canvas"></canvas>

<script src="fabric.js"></script>

2. 이미지 그리기

Fabric.js를 사용하여 캔버스에 이미지를 그릴 수 있습니다. 아래 코드는 캔버스에 이미지를 그리는 간단한 예시입니다:

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

fabric.Image.fromURL('image.jpg', function(img) {
  canvas.add(img);
});

위 코드에서 image.jpg는 캔버스에 그릴 이미지 파일의 경로입니다.

3. 이미지 저장하기

이제 캔버스에 그린 이미지를 파일로 저장하는 방법을 알아보겠습니다. Fabric.js는 toDataURL 메서드를 제공합니다. 아래 코드는 캔버스에 그린 이미지를 PNG 파일로 저장하는 예시입니다:

var dataURL = canvas.toDataURL('image/png');
var link = document.createElement('a');
link.href = dataURL;
link.download = 'image.png';
link.click();

위 코드에서 image.png는 저장할 이미지 파일의 이름입니다. toDataURL 메서드를 사용하여 캔버스의 이미지 데이터를 Base64 형식으로 가져온 뒤, 이를 링크의 href 속성값으로 설정합니다. 그리고 download 속성을 사용하여 파일의 이름을 지정하고, click 메서드를 호출하여 링크를 클릭하여 파일을 다운로드합니다.

결론

Fabric.js를 사용하여 캔버스에 그린 이미지를 파일로 저장하는 방법을 알아보았습니다. 이를 통해 웹 브라우저에서 그린 그림을 저장할 수 있습니다. Fabric.js는 다양한 기능을 제공하므로, 웹 애플리케이션 개발에 유용하게 활용할 수 있습니다.

참고 자료:

• Fabric.js 공식 문서
• MDN Web APIs: CanvasRenderingContext2D