[javascript] Cropper.js를 사용하여 이미지의 크기 제한하기

29 Nov 2023

javascript

이미지 업로드 시 사용자가 이미지의 크기를 조정할 수 있도록 Cropper.js라는 JavaScript 라이브러리를 사용할 수 있습니다. Cropper.js는 사용자가 원하는 크기로 이미지를 자를 수 있는 기능을 제공하며, 이미지 업로드 시 이미지의 크기를 제한하는 데에도 유용하게 사용될 수 있습니다.

이 튜토리얼에서는 Cropper.js를 사용하여 이미지의 크기를 제한하는 방법을 알아보겠습니다.

Cropper.js 설치하기

Cropper.js를 사용하기 위해서는 먼저 해당 라이브러리를 다운로드하거나 CDN을 통해 불러와야 합니다. 간단한 방법으로는 아래와 같이 CDN을 통해 Cropper.js를 불러올 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/cropperjs@1.5.1/dist/cropper.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cropperjs@1.5.1/dist/cropper.min.css">

Cropper.js 적용하기

이미지를 업로드할 때마다 Cropper.js를 적용해야 합니다. 이미지를 선택하고 적용 버튼을 누르면 Cropper.js의 기능이 적용된 이미지가 화면에 나타납니다.

<!DOCTYPE html>
<html>
<head>
  <title>Cropper.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/cropperjs@1.5.1/dist/cropper.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cropperjs@1.5.1/dist/cropper.min.css">
</head>
<body>
  <input type="file" id="imageInput">
  <button onclick="startCropper()">적용</button>

  <script>
    function startCropper() {
      const imageInput = document.getElementById('imageInput');
      const cropper = new Cropper(imageInput, {
        aspectRatio: 1 / 1, // 크롭할 이미지의 가로 세로 비율 (1:1로 설정)
        crop: function(event) {
          // 이미지 크롭 후 처리할 로직 작성
        }
      });
    }
  </script>
</body>
</html>

위의 예제에서 aspectRatio 옵션을 통해 크록할 이미지의 가로 세로 비율을 1:1로 설정했습니다. 이 값은 필요에 따라 변경할 수 있습니다. 그리고 crop 콜백 함수를 통해 이미지를 크롭한 후에 처리할 로직을 작성할 수 있습니다.

이미지 크기 제한하기

Cropper.js를 사용하여 이미지의 크기를 제한하려면 크롭한 이미지를 저장한 후에 해당 이미지의 크기를 확인하고 필요한 처리를 해주어야 합니다.

const croppedImage = cropper.getCroppedCanvas();

// 저장된 이미지 크기 확인
const width = croppedImage.width;
const height = croppedImage.height;

// 이미지 크기 제한 로직
if (width > 1000 || height > 1000) {
  // 크기가 제한을 초과하는 경우, 처리 로직 작성
} else {
  // 크기가 제한을 초과하지 않는 경우, 처리 로직 작성
}

위의 예제에서 getCroppedCanvas 메서드를 사용하여 크롭한 이미지를 저장할 수 있습니다. 이후 저장된 이미지의 크기를 확인하여 필요한 처리를 해주면 됩니다.

Cropper.js를 사용하면 사용자가 이미지의 크기를 조정하고 제한할 수 있는 기능을 간단하게 구현할 수 있습니다. 필요한 로직을 추가하여 원하는 기능을 구현해보세요.

Cropper.js 설치하기

Cropper.js 적용하기

이미지 크기 제한하기

참고 자료