[javascript] Cropper.js를 사용하여 이미지에 경계선 효과 추가하기

29 Nov 2023

javascript

이미지 편집과 잘라내기를 위한 웹 애플리케이션을 개발하다보면, 이미지에 경계선 효과를 추가하는 작업이 필요할 수 있습니다. 이때 Cropper.js라는 JavaScript 라이브러리를 사용하면 간편하게 경계선 효과를 구현할 수 있습니다.

Cropper.js란?

Cropper.js는 HTML 이미지 요소를 활용하여 이미지를 자르고, 회전시키고, 확대/축소하는 기능을 제공하는 JavaScript 라이브러리입니다. 사용자가 지정한 영역으로 이미지를 잘라내는 등의 작업을 할 때 유용하게 활용할 수 있습니다.

Cropper.js 설치

Cropper.js를 사용하기 위해 먼저 라이브러리를 설치해야합니다. 아래의 npm 명령어를 사용하여 Cropper.js를 설치할 수 있습니다.

npm install cropperjs

또는 CDN 링크를 사용하여 Cropper.js 스크립트를 가져올 수도 있습니다.

<script src="https://cdn.jsdelivr.net/npm/cropperjs@1.5.12/dist/cropper.js"></script>

Cropper.js로 이미지 경계선 효과 추가하기

이미지에 경계선 효과를 추가하기 위해 다음 단계를 따르세요:

HTML의 이미지 요소를 준비합니다.

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

JavaScript에서 Cropper 객체를 초기화하고 옵션을 설정합니다.

var image = document.getElementById('image');
var cropper = new Cropper(image, {
  aspectRatio: 1,
  viewMode: 1,
  cropBoxResizable: false,
  guides: false,
  background: false,
  highlight: true,
  dragMode: 'move',
});

aspectRatio: 잘라낼 영역의 가로 세로 비율을 설정합니다.
viewMode: 보기 모드를 설정합니다. 0은 자유로운 크기, 1은 고정된 크기로 설정됩니다.
cropBoxResizable: 잘라내기 영역의 크기 조절 가능 여부를 설정합니다.
guides, background, highlight: 사각형 가이드, 배경, 하이라이트 효과의 표시 여부를 설정합니다.
dragMode: 이미지를 드래그할 때의 동작 모드를 설정합니다.

원하는 작업을 수행합니다. 잘라내기 영역을 지정하거나, 이미지를 회전시키거나, 확대/축소할 수 있습니다.

// 예시: 이미지를 90도 회전시키기
cropper.rotate(90);

// 예시: 잘라내기 영역 지정하기
cropper.setCropBoxData({ left: 100, top: 100, width: 200, height: 200 });

// 예시: 이미지 확대하기
cropper.zoom(0.1);

Cropper.js 사용 예시

아래는 Cropper.js를 사용하여 이미지에 경계선 효과를 추가하는 예시 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">
</head>
<body>
  <div>
    <img src="image.jpg" id="image">
  </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, {
      aspectRatio: 1,
      viewMode: 1,
      cropBoxResizable: false,
      guides: false,
      background: false,
      highlight: true,
      dragMode: 'move',
    });
  </script>
</body>
</html>

위 예시 코드를 이용하면, 이미지에 경계선 효과를 추가하여 사용자가 원하는 부분을 잘라내는 기능을 구현할 수 있습니다.

마무리

Cropper.js 라이브러리를 사용하면 이미지에 경계선 효과를 추가하는 작업을 간편하게 처리할 수 있습니다. 필요한 설정을 하고 Cropper 객체를 초기화한 후, 원하는 작업을 수행하여 이미지를 효과적으로 편집할 수 있습니다. 자세한 사항은 Cropper.js 공식 문서를 참고하시기 바랍니다.