[javascript] Fabric.js로 바탕화면 이미지 크기 조절하기

30 Nov 2023

javascript

지금까지 웹 페이지에서 사용자가 이미지를 업로드하고 이를 조작하는 방법에 대해 알아보았습니다. 이번에는 바탕화면 이미지의 크기를 조절하는 방법에 대해서 살펴보겠습니다. 이를 위해 Fabric.js를 사용할 것입니다.

Fabric.js란?

Fabric.js는 웹 애플리케이션에서 캔버스요소를 조작하기 위한 강력한 자바스크립트 라이브러리입니다. Fabric.js를 사용하면 그림 그리기, 이미지 조작, 텍스트 편집 등과 같은 다양한 기능을 구현할 수 있습니다.

바탕화면 이미지 크기 조절하기

Fabric.js를 사용하여 바탕화면 이미지의 크기를 조절하는 방법은 다음과 같습니다:

Fabric.js 라이브러리를 HTML 문서에 추가합니다.

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

Canvas 요소를 생성하고 Fabric.js의 canvas 객체를 초기화합니다.

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

바탕화면 이미지를 생성하고 Canvas에 추가합니다.

fabric.Image.fromURL('image.jpg', function(img) {
  canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
    scaleX: canvas.getWidth() / img.width,
    scaleY: canvas.getHeight() / img.height
  });
});

이미지의 scaleX와 scaleY 속성은 이미지의 가로 및 세로 크기를 조정하는 데 사용됩니다. canvas.getWidth() 및 canvas.getHeight() 함수는 Canvas 요소의 현재 너비와 높이를 반환합니다.

사용자가 이미지 크기를 조절할 수 있는 기능을 추가합니다. 이를 위해 Fabric.js의 이벤트 핸들러를 등록합니다.

canvas.on('object:scaling', function(e) {
  var obj = e.target;
  obj.set({
    scaleX: obj.scaleX * obj.canvas.getZoom(),
    scaleY: obj.scaleY * obj.canvas.getZoom()
  });
});

object:scaling 이벤트는 사용자가 오브젝트의 크기를 조절할 때 발생합니다. 이벤트 핸들러에서는 오브젝트의 scaleX와 scaleY 속성을 현재 캔버스의 zoom 비율과 곱하여 조정합니다.

원하는 UI 컨트롤을 추가하여 사용자가 이미지 크기를 조절할 수 있도록 합니다. 이 예제에서는 간단한 버튼을 사용하도록 하겠습니다.

<button onclick="zoomIn()">Zoom In</button>
<button onclick="zoomOut()">Zoom Out</button>

JavaScript 함수를 작성해서 사용자가 클릭한 버튼에 따라 이미지 크기를 조정합니다.

function zoomIn() {
  canvas.setZoom(canvas.getZoom() * 1.1);
  canvas.renderAll();
}

function zoomOut() {
  canvas.setZoom(canvas.getZoom() / 1.1);
  canvas.renderAll();
}

setZoom() 함수를 사용하여 Canvas의 zoom 레벨을 조절하고, renderAll() 함수로 변경 사항을 적용합니다.

이제 사용자는 “Zoom In” 및 “Zoom Out” 버튼을 클릭하여 바탕화면 이미지의 크기를 조절할 수 있습니다.

결론

Fabric.js를 사용하여 바탕화면 이미지의 크기를 조절하는 방법을 알아보았습니다. 이를 통해 사용자는 간단한 UI 컨트롤을 사용하여 이미지를 원하는 크기로 조절할 수 있게 됩니다. Fabric.js의 다양한 기능을 활용하면 웹 애플리케이션에서 이미지를 다루는 기능을 구현하기가 훨씬 쉬워집니다.

Fabric.js란?

바탕화면 이미지 크기 조절하기

결론

참고 자료