[javascript] Cropper.js를 사용하여 이미지에 디스토션 효과 추가하기

29 Nov 2023

javascript

이미지 편집은 웹 개발에서 자주 사용되는 기능 중 하나입니다. 이미지를 자르고 크기를 조정하며, 필터나 효과를 추가할 수 있습니다. 이번 기사에서는 Cropper.js 라이브러리를 사용하여 이미지에 디스토션 효과를 추가하는 방법을 알아보겠습니다.

Cropper.js란?

Cropper.js는 이미지를 자르고, 회전 및 크기 조정, 여러 가지 효과를 적용할 수 있는 JavaScript 라이브러리입니다. HTML5의 canvas 요소와 함께 사용하여 이미지 편집 환경을 구현할 수 있습니다. Cropper.js는 다양한 옵션을 제공하며, 사용자가 직접 효과 및 스타일을 사용자 정의할 수 있습니다.

Cropper.js 설치하기

Cropper.js를 사용하기 위해 먼저 해당 라이브러리를 다운로드하고 설치해야 합니다. Cropper.js는 npm을 통해 설치할 수 있습니다. 다음 명령을 사용하여 Cropper.js를 설치합니다:

npm install cropperjs

Cropper.js 사용하기

Cropper.js를 사용하기 위해 먼저 HTML 파일에 이미지 엘리먼트와 Canvas 엘리먼트를 추가해야 합니다. 예를 들어, 다음과 같이 HTML 코드를 작성합니다:

<img src="image.jpg" id="image">
<canvas id="canvas"></canvas>

다음으로 JavaScript 파일에 Cropper.js를 초기화하는 코드를 작성해야 합니다. 이 코드는 이미지 엘리먼트와 Canvas 엘리먼트를 선택하고, Cropper.js를 초기화합니다:

const image = document.getElementById('image');
const canvas = document.getElementById('canvas');

const cropper = new Cropper(image, {
  viewMode: 1,
  dragMode: 'move',
  aspectRatio: 16 / 9,
  crop(event) {
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(
      image,
      event.detail.x,
      event.detail.y,
      event.detail.width,
      event.detail.height,
      0,
      0,
      canvas.width,
      canvas.height
    );
  },
});

위 코드에서 image 변수는 이미지 엘리먼트를, canvas 변수는 Canvas 엘리먼트를 나타냅니다. cropper 변수는 Cropper.js 인스턴스를 나타냅니다. crop 이벤트가 발생할 때마다, Canvas에 이미지가 클리핑되어 표시됩니다.

이제 Cropper.js를 사용하여 이미지에 디스토션 효과를 추가할 수 있습니다. 예를 들어, 이미지를 회전시키거나 축소시키는 효과를 적용할 수 있습니다.

// 이미지 회전
cropper.rotate(45);

// 이미지 축소
cropper.zoom(-0.5);

결론

이번 기사에서는 Cropper.js를 사용하여 이미지에 디스토션 효과를 추가하는 방법을 알아보았습니다. Cropper.js는 이미지 편집을 쉽게 구현할 수 있는 강력한 JavaScript 라이브러리입니다. 다양한 옵션과 기능을 활용하여 웹 페이지에서 이미지 편집을 구현해보세요.

Cropper.js란?

Cropper.js 설치하기

Cropper.js 사용하기

결론

참고 자료