[javascript] Fabric.js로 이미지 효과 적용하기(회전, 크기 조절 등)
이미지 효과를 적용할 때 Fabric.js는 강력한 도구입니다. Fabric.js는 HTML5 캔버스를 이용하여 이미지를 다룰 수 있게 해주는 자바스크립트 라이브러리입니다. 이 블로그 포스트에서는 Fabric.js를 사용하여 이미지에 회전, 크기 조절 등 다양한 효과를 적용하는 방법을 알아보겠습니다.
목차
설치
Fabric.js를 사용하기 위해서는 먼저 패키지를 설치해야 합니다. npm을 사용하여 패키지를 설치할 수 있습니다.
npm install fabric
기본 설정
Fabric.js를 사용하기 위해 HTML 문서에서 스크립트를 포함해야 합니다. 다음과 같이 스크립트 태그를 추가합니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
이미지 로드
이미지를 로드하기 위해 fabric.Image.fromURL 함수를 사용합니다. 다음은 이미지를 로드하는 예제입니다.
fabric.Image.fromURL('image.jpg', function(img) {
// 이미지 로드 후 실행할 코드 작성
});
회전
이미지에 회전 효과를 적용하려면 setAngle 메서드를 사용합니다. 각도는 라디안 단위로 표시됩니다. 다음은 이미지를 45도 회전하는 예제입니다.
img.setAngle(45);
canvas.renderAll();
크기 조절
이미지의 크기를 조절하려면 scale 메서드를 사용합니다. scale 메서드에는 가로와 세로 방향의 크기 조절 비율을 지정할 수 있습니다. 다음은 이미지의 가로와 세로를 각각 2배로 크기를 조절하는 예제입니다.
img.scaleX = 2;
img.scaleY = 2;
canvas.renderAll();
강조
Fabric.js의 opacity 속성을 사용하여 이미지에 투명도 효과를 적용할 수 있습니다. opacity 값은 0에서 1 사이의 값을 가질 수 있습니다. 다음은 이미지에 50% 투명도 효과를 적용하는 예제입니다.
img.opacity = 0.5;
canvas.renderAll();