Fabric.js는 HTML5 Canvas를 사용하여 다양한 그래픽 요소를 생성하고 조작할 수 있는 JavaScript 라이브러리입니다. 이번 포스트에서는 Fabric.js를 사용하여 캔버스에 이미지를 불러오는 방법에 대해 알아보겠습니다.
이미지 불러오기
우선 Fabric.js를 프로젝트에 추가해야 합니다. fabric.js 파일을 다운로드하거나 CDN을 통해 추가할 수 있습니다. HTML 파일에 다음과 같이 스크립트를 추가합니다:
<script src="fabric.js"></script>
이제 Fabric.js를 사용하여 이미지를 불러오는 코드를 작성해보겠습니다.
// 캔버스 객체 생성
var canvas = new fabric.Canvas('canvas');
// 이미지 객체 생성
fabric.Image.fromURL('image.jpg', function(img) {
// 이미지를 캔버스에 추가
canvas.add(img);
// 이미지 크기 조정
img.scaleToWidth(canvas.getWidth());
img.scaleToHeight(canvas.getHeight());
// 캔버스 새로 그리기
canvas.renderAll();
});
위의 코드에서 fabric.Image.fromURL 함수를 사용하여 이미지를 불러옵니다. 이미지 파일의 경로를 첫 번째 인자로 전달하고, 두 번째 인자로는 콜백 함수를 전달합니다. 콜백 함수는 이미지 객체가 생성되면 실행됩니다. 이때, 이미지 객체를 캔버스에 추가하고, 크기를 조정한 후 캔버스를 다시 그려주어야 합니다.
이미지 스케일 조정
위의 코드에서 img.scaleToWidth와 img.scaleToHeight 함수를 사용하여 이미지의 크기를 조정하였습니다. canvas.getWidth와 canvas.getHeight 함수를 사용하여 캔버스의 너비와 높이를 가져와 이미지에 적용하였습니다. 이를 통해 이미지가 캔버스의 크기에 맞춰져 화면에 표시됩니다.
결론
Fabric.js를 사용하여 캔버스에 이미지를 불러오는 방법을 알아보았습니다. 이미지를 캔버스에 추가한 후에는 필요에 따라 크기 조정이나 다른 작업을 수행할 수 있습니다. Fabric.js는 그래픽 요소를 다루는 다양한 기능을 제공하므로, 더 많은 기능을 활용하여 다양한 그래픽 작업을 수행할 수 있습니다.