[javascript] Fabric.js로 바탕화면 이미지의 불투명도 조절하기

30 Nov 2023

javascript

이번에는 Fabric.js를 사용하여 바탕화면 이미지의 불투명도를 조절하는 방법에 대해 알아보겠습니다. Fabric.js는 웹 애플리케이션에서 캔버스 요소를 다루는데 사용되는 강력한 자바스크립트 라이브러리입니다.

준비물

이 예제를 따라해보기 전에 Fabric.js를 다운로드하고 HTML 파일에 추가해야 합니다. 아래의 링크에서 최신 버전을 다운로드할 수 있습니다.

또한, 바탕화면 이미지를 포함하는 HTML 파일을 준비해야 합니다. 아래는 예시 코드입니다.

<!DOCTYPE html>
<html>

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

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

</html>

코드 설명

간단한 바탕화면 이미지를 불러와 캔버스에 나타내기 위해 Fabric.js를 사용할 것입니다. 아래는 불투명도를 조절하는 코드입니다.

// 캔버스 생성
var canvas = new fabric.Canvas('canvas');

// 이미지 객체 생성
fabric.Image.fromURL('background.jpg', function(img) {
  // 이미지 크기 설정
  img.scaleToWidth(canvas.width);
  img.scaleToHeight(canvas.height);

  // 이미지에 불투명도 조절기 생성
  var opacitySlider = document.createElement('input');
  opacitySlider.type = 'range';
  opacitySlider.min = 0;
  opacitySlider.max = 100;
  opacitySlider.value = img.opacity * 100;

  // 불투명도 조절기 이벤트 처리
  opacitySlider.addEventListener('input', function() {
    var opacity = opacitySlider.value / 100;
    img.set('opacity', opacity);
    canvas.renderAll();
  });

  // 불투명도 조절기 삽입
  document.body.appendChild(opacitySlider);

  // 캔버스에 이미지 추가
  canvas.add(img);
});

위 코드에서 fabric.Image.fromURL 함수를 사용하여 바탕화면 이미지를 캔버스에 추가합니다. 그리고 불투명도 조절을 위한 슬라이더를 생성하고, 슬라이더의 값을 변경할 때마다 이미지의 불투명도를 업데이트합니다. 마지막으로 캔버스에 이미지를 추가한 뒤, canvas.renderAll() 함수를 호출하여 변경사항을 캔버스에 적용합니다.

실행하기

위의 코드를 HTML 파일에 추가한 뒤 웹 브라우저에서 실행하면 바탕화면 이미지와 불투명도 조절기가 표시될 것입니다. 슬라이더를 움직여서 바탕화면 이미지의 불투명도를 조절해보세요.

마무리

이렇게 Fabric.js를 사용하여 바탕화면 이미지의 불투명도를 조절하는 방법을 알아보았습니다. Fabric.js는 강력한 기능을 제공하며 다양한 캔버스 요소를 다루는데 유용한 도구입니다. 추가적인 정보는 Fabric.js 공식 문서를 참고하시기 바랍니다.