[javascript] Cropper.js를 사용하여 이미지를 자르는 방법

29 Nov 2023

javascript

이미지 자르기는 웹 개발에서 자주 사용되는 기능 중 하나입니다. Cropper.js는 JavaScript 기반의 이미지 자르기 라이브러리로써, 사용하기 쉬우면서도 다양한 기능들을 제공합니다. 이번 포스트에서는 Cropper.js를 사용하여 이미지를 자르는 방법에 대해 알아보겠습니다.

Cropper.js 설치

Cropper.js를 사용하기 위해서는 먼저 이를 설치해야 합니다. npm을 사용하는 경우, 다음과 같이 설치할 수 있습니다.

npm install cropperjs

또는, CDN을 통해 직접 라이브러리를 불러올 수도 있습니다.

<script src="https://cdn.jsdelivr.net/npm/cropperjs"></script>

Cropper.js 사용하기

Cropper.js를 사용하기 위해서는 HTML 요소에 해당 이미지를 추가하고, 그 요소를 Cropper 객체에 전달해야 합니다. 이렇게 하면 이미지를 자를 수 있는 인터페이스가 생성됩니다.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.css">
</head>
<body>
  <div>
    <img id="image" src="image.jpg">
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
  <script>
    var image = document.getElementById('image');
    var cropper = new Cropper(image);
  </script>
</body>
</html>

위의 코드에서 image.jpg 부분을 자른 이미지로 대체하면 해당 이미지를 자를 수 있는 인터페이스가 생성됩니다.

인터페이스 사용하기

인터페이스를 사용해 이미지를 자르는 방법은 다소 다를 수 있습니다. Cropper.js는 다양한 옵션을 제공하여 원하는 동작을 설정할 수 있습니다. 예를 들어, 자를 영역의 비율을 고정하거나, 최소/최대 자를 크기를 제한하는 등의 설정이 가능합니다.

<script>
  var image = document.getElementById('image');
  var cropper = new Cropper(image, {
    aspectRatio: 16 / 9,
    minCropBoxWidth: 200,
    minCropBoxHeight: 200,
  });
</script>

위의 예시에서는 자를 영역의 비율을 16:9로 고정하고, 최소 자를 크기를 200x200으로 제한하도록 설정한 것입니다.

자른 이미지 가져오기

이미지를 자른 후에는 자른 이미지를 가져올 수 있어야 합니다. Cropper.js는 getCroppedCanvas 메서드를 통해 자른 이미지를 가져올 수 있는 기능을 제공합니다.

var canvas = cropper.getCroppedCanvas({
  width: 300,
  height: 300,
});

document.body.appendChild(canvas);

위의 예시에서는 자른 이미지의 크기를 300x300 픽셀로 설정하고, 해당 이미지를 body에 추가한 것입니다.

마무리

이번 포스트에서는 Cropper.js를 사용하여 이미지를 자르는 방법에 대해 알아보았습니다. Cropper.js를 활용하면 간단하게 이미지를 자를 수 있으며, 다양한 옵션을 설정하여 원하는 대로 자르는 기능을 구현할 수 있습니다.

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