이미지 왜곡 효과를 추가하기 위해 Cropper.js 라이브러리를 사용할 수 있습니다. Cropper.js는 사용자가 원하는 형태로 이미지를 자를 수 있는 기능을 제공하는 강력한 라이브러리입니다. 이 튜토리얼에서는 Cropper.js를 사용하여 이미지에 왜곡 효과를 추가하는 방법에 대해 알아보겠습니다.

Cropper.js 설치 및 설정

Cropper.js를 사용하기 위해 먼저 해당 라이브러리를 설치해야 합니다. 다음 명령을 사용하여 Cropper.js 라이브러리를 설치합니다.

npm install cropperjs

다음으로 HTML에 이미지를 표시할 img 요소를 추가합니다.

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

이제 JavaScript 파일에 다음 코드를 추가하여 Cropper.js를 초기화하고 이미지에 왜곡 효과를 추가합니다.

import Cropper from 'cropperjs';

const image = document.getElementById('image');
const cropper = new Cropper(image, {
  aspectRatio: 16 / 9, // 원하는 비율로 설정
  viewMode: 1, // 화면 내에서 자유롭게 조정 가능
  dragMode: 'move', // 드래그로 위치 이동 가능
  guides: true, // 가이드 라인 표시
  center: true, // 이미지 중앙에 위치
  highlight: false, // 이미지 외각선 강조 표시 비활성화
  cropBoxMovable: false, // 이미지 박스 이동 비활성화
  cropBoxResizable: true, // 이미지 박스 크기 조절 활성화
});

// 자르기 버튼 클릭 시 이벤트 처리
document.getElementById('cropButton').addEventListener('click', () => {
  const croppedImageData = cropper.getCroppedCanvas().toDataURL(); // 자른 이미지 데이터 가져오기
  // 자른 이미지 데이터를 사용하여 원하는 작업 수행
});

위 코드에서 aspectRatio를 원하는 비율로 설정할 수 있습니다. 또한 viewMode, dragMode, guides, center, highlight, cropBoxMovable, cropBoxResizable 와 같은 옵션을 변경하여 원하는 형태로 이미지를 설정할 수 있습니다.

Cropper.js를 이용한 이미지 왜곡 효과

위의 코드에서 cropButton 버튼을 클릭하면 cropper.getCroppedCanvas().toDataURL() 메소드를 사용하여 자른 이미지 데이터를 가져올 수 있습니다. 이 데이터를 사용하여 원하는 작업을 수행할 수 있습니다. 예를 들어, 왜곡된 이미지를 저장하거나 서버로 업로드할 수 있습니다.

document.getElementById('cropButton').addEventListener('click', () => {
  const croppedImageData = cropper.getCroppedCanvas().toDataURL(); // 자른 이미지 데이터 가져오기
  // 자른 이미지 데이터를 사용하여 원하는 작업 수행
  // 예: 이미지 저장 또는 서버로 업로드
});

위의 코드에서 cropper.getCroppedCanvas().toDataURL() 메소드는 Cropper.js에서 이미지를 자른 후 자른 이미지 데이터를 Base64 형태로 반환합니다. 자른 이미지 데이터를 사용하여 필요한 작업을 수행할 수 있습니다.

결론

이제 Cropper.js를 사용하여 이미지에 왜곡 효과를 추가하는 방법에 대해 알아보았습니다. Cropper.js를 사용하면 사용자가 원하는 형태로 이미지를 자를 수 있으며, 자른 이미지 데이터를 사용하여 원하는 작업을 수행할 수 있습니다. 이를 통해 웹 애플리케이션에서 이미지 편집 기능을 구현하는 데 도움이 될 것입니다.

참고 자료:

• Cropper.js 공식 문서