Fabric.js는 웹 애플리케이션에서 캔버스를 사용하여 그림과 이미지를 처리할 수 있는 JavaScript 라이브러리입니다. 이번 튜토리얼에서는 Fabric.js를 사용하여 이미지를 캔버스에 추가하는 방법을 알아보겠습니다.

1. Fabric.js 라이브러리 추가

먼저, HTML 파일에서 Fabric.js 라이브러리를 추가해야 합니다. 다음과 같이 <script> 태그를 사용하여 라이브러리를 가져올 수 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>

2. 캔버스 생성

Fabric.js를 사용하여 캔버스를 생성합니다. <canvas> 태그를 추가하고, JavaScript 코드에서 해당 요소를 가져옵니다.

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

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

3. 이미지 추가

이제 Fabric.js를 사용하여 이미지를 캔버스에 추가해보겠습니다. 먼저, 이미지 객체를 생성하고 소스 URL을 설정합니다.

const imageUrl = '이미지 URL';
const image = new fabric.Image();
image.setSrc(imageUrl, () => {
    // 이미지가 로드된 후 실행되는 콜백 함수
    canvas.add(image); // 이미지를 캔버스에 추가
    canvas.renderAll(); // 캔버스 다시 그리기
});

위 코드에서 imageUrl에는 사용할 이미지의 URL을 지정해야 합니다. 이미지가 로드된 후에는 canvas.add() 메서드를 사용하여 이미지를 캔버스에 추가하고, canvas.renderAll() 메서드를 사용하여 캔버스를 다시 그립니다.

4. 이미지 위치 및 크기 조정

추가한 이미지의 위치와 크기를 조정할 수 있습니다. Fabric.js는 left, top, width, height 등의 속성을 사용하여 이미지를 조작할 수 있습니다. 예를 들어, 이미지를 위치를 변경하고 크기를 조정하려면 다음과 같이 코드를 작성할 수 있습니다.

image.set({
    left: 100, // X 좌표
    top: 100, // Y 좌표
    width: 200, // 이미지 너비
    height: 200 // 이미지 높이
});
canvas.renderAll(); // 캔버스 다시 그리기

위 코드에서는 left와 top 값을 변경하여 이미지의 위치를 조정하고, width와 height 값을 변경하여 이미지의 크기를 조정합니다.

5. 추가적인 기능

Fabric.js는 이미지를 조작하고 편집하는 다양한 기능을 제공합니다. 예를 들면, 이미지를 드래그하여 이동하거나, 크기를 변경할 수 있습니다. 추가적인 기능을 사용하고 싶다면 Fabric.js 공식 문서를 참조하세요.

이제 Fabric.js를 사용하여 이미지를 캔버스에 추가하는 방법을 알게 되었습니다. 웹 애플리케이션에서 다양한 그림과 이미지를 다룰 때 유용하게 사용할 수 있는 라이브러리입니다.

참고 자료:

• Fabric.js 공식 웹사이트
• Fabric.js GitHub 저장소