[javascript] Fabric.js로 바탕화면 이미지 추가하기

30 Nov 2023

javascript

이번 블로그에서는 Canvas 라이브러리인 Fabric.js를 사용하여 웹 페이지의 바탕화면에 이미지를 추가하는 방법에 대해 알아보겠습니다.

Fabric.js란?

Fabric.js는 HTML5 Canvas 위에서 동작하는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 Canvas를 조작하고 다양한 도형, 이미지, 텍스트 등을 생성하고 수정하는 기능을 간편하게 구현할 수 있습니다.

바탕화면에 이미지 추가하기

Fabric.js 라이브러리를 불러옵니다.
```
<script src="fabric.min.js"></script>
```
Canvas 엘리먼트를 생성합니다.
```
<canvas id="canvas"></canvas>
```
JavaScript 코드에서 Canvas 객체를 생성합니다.
```
const canvas = new fabric.Canvas('canvas');
```

이미지 오브젝트를 생성하고 Canvas에 추가합니다.

fabric.Image.fromURL('image.png', function (image) {
  canvas.setBackgroundImage(image, canvas.renderAll.bind(canvas));
});

위와 같은 코드를 사용하면 ‘image.png’ 파일을 바탕화면에 추가할 수 있습니다. 이미지 파일의 경로와 파일 이름을 자신의 파일로 변경해주시기 바랍니다.

추가적인 기능

Fabric.js를 사용하면 이미지에 다양한 변형과 효과를 적용할 수 있습니다. 예를 들어, 이미지를 회전시키거나 크기를 조절하는 등의 동작을 간단하게 구현할 수 있습니다. Fabric.js의 다른 기능에 대해서는 공식 문서를 참고하시기 바랍니다.

마무리

이번에는 Fabric.js를 사용하여 웹 페이지의 바탕화면에 이미지를 추가하는 방법에 대해 알아보았습니다. Fabric.js를 활용하면 Canvas를 사용해 다양한 그래픽 및 이미지 처리 기능을 구현할 수 있으니, 관심 있는 분들은 Fabric.js를 공부해보시기 바랍니다.

Fabric.js 공식 문서: https://fabricjs.com/
Fabric.js GitHub 저장소: https://github.com/fabricjs/fabric.js

다음에 또 다른 기술에 대해 알려드리겠습니다. 감사합니다!