Cropper.js는 자바스크립트를 사용하여 이미지를 자르고 크롭하는 데 사용되는 강력한 라이브러리입니다. 이 라이브러리를 사용하면 사용자가 원하는 형식으로 이미지를 자를 수 있습니다. 이번 블로그 포스트에서는 Cropper.js를 사용하여 이미지를 다른 파일 포맷으로 변환하는 방법에 대해 알아보겠습니다.

Cropper.js 설치하기

Cropper.js를 사용하기 위해서는 먼저 해당 라이브러리를 프로젝트에 설치해야 합니다. 아래의 명령어를 사용하여 NPM을 통해 Cropper.js를 설치할 수 있습니다.

npm install cropperjs

이미지 자르기 및 크롭하기

Cropper.js를 사용하여 이미지를 자르고 크롭하는 방법에 대해 간단한 예제를 살펴보겠습니다.

// HTML에서 이미지 요소 선택
var image = document.getElementById('image');

// Cropper.js 인스턴스 생성
var cropper = new Cropper(image, {
  aspectRatio: 16 / 9,
  crop: function(event) {
    // 자르기 및 크롭 완료 후 호출되는 콜백 함수
    console.log(event.detail);
  }
});

위의 예제에서는 HTML에서 id가 “image”인 이미지 요소를 선택하고, Cropper.js를 초기화하는 코드를 보여줍니다. aspectRatio를 사용하여 자르기 및 크롭할 이미지의 가로 세로 비율을 설정할 수 있습니다. crop 이벤트 핸들러를 통해 자르기 및 크롭 완료 후 호출되는 콜백 함수를 정의할 수 있습니다.

이미지를 다른 파일 포맷으로 변환하기

Cropper.js를 사용하여 자른 이미지를 다른 파일 포맷으로 변환하려면, toBlob 메소드를 사용합니다. toBlob 메소드를 사용하여 변환 후 콜백 함수를 정의할 수 있습니다.

cropper.getCroppedCanvas().toBlob(function(blob) {
  // 변환된 이미지(blob)를 다른 파일 포맷으로 저장 또는 전송
  var formData = new FormData();
  formData.append('croppedImage', blob, 'croppedImage.jpg');

  // AJAX 또는 다른 HTTP 요청을 통해 변환된 이미지 전송
  // ...
});

위의 코드에서는 getCroppedCanvas 메소드를 사용하여 자른 이미지를 캔버스로 가져옵니다. 그런 다음, toBlob 메소드를 사용하여 변환된 이미지(blob)를 얻고, 원하는 파일 이름과 함께 FormData에 추가합니다. 이후, AJAX 또는 다른 HTTP 요청을 사용하여 변환된 이미지를 전송할 수 있습니다.

결론

Cropper.js를 사용하여 이미지를 다른 파일 포맷으로 변환하는 방법에 대해 알아보았습니다. Cropper.js는 강력한 이미지 자르기 및 크롭 기능을 제공하므로, 사용자가 원하는 형태로 이미지를 변환하고 저장할 수 있습니다.

더 자세한 정보는 Cropper.js 공식 문서를 참조하시기 바랍니다.