[javascript] Cropper.js를 사용하여 이미지에 태그 추가하기

29 Nov 2023

javascript

이미지에서 특정 부분을 선택하거나 표시하기 위해 이미지에 태그를 추가하는 것은 많은 웹 애플리케이션에서 공통적으로 사용됩니다. Cropper.js는 이미지를 자르고, 확대/축소하고, 회전하는 기능을 제공하는 강력한 JavaScript 라이브러리입니다. 이 튜토리얼에서는 Cropper.js를 사용하여 이미지에 태그를 추가하는 방법에 대해 알아보겠습니다.

Cropper.js 설치

먼저, Cropper.js를 설치해야 합니다. 아래 명령을 사용하여 npm으로 Cropper.js를 설치할 수 있습니다.

npm install cropperjs

아래와 같이 HTML 파일에 Cropper.js 스타일시트와 스크립트를 추가합니다.

<!DOCTYPE html>
<html>
<head>
    <title>Cropper.js Example</title>
    <link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css">
</head>
<body>
    <!-- 이미지가 들어갈 요소 -->
    <div>
        <img id="image" src="path/to/image.jpg">
    </div>

    <script src="https://unpkg.com/cropperjs"></script>
</body>
</html>

Cropper.js를 사용하여 이미지에 태그 추가하기

Cropper.js를 사용하여 이미지에 태그를 추가하려면 다음 단계를 따르면 됩니다.

이미지를 선택합니다.

const image = document.getElementById('image');

Cropper 객체를 생성합니다.

const cropper = new Cropper(image, {
  zoomable: false,  // 이미지 확대/축소 비활성화
  rotatable: false, // 이미지 회전 비활성화
  crop: function(event) {
    const cropData = event.detail;
    // 태그를 추가하는 로직 구현
  }
});

이미지에서 영역을 선택하고 태그를 추가합니다.

// 태그를 추가하는 로직
function addTag(x, y, width, height) {
  const tagElement = document.createElement('div');
  tagElement.style.position = 'absolute';
  tagElement.style.left = x + 'px';
  tagElement.style.top = y + 'px';
  tagElement.style.width = width + 'px';
  tagElement.style.height = height + 'px';
  tagElement.style.border = '2px solid red';
  image.parentNode.appendChild(tagElement);
}

// 이미지에서 영역을 선택할 때마다 태그를 추가
cropper.on('cropend', function() {
  const cropData = cropper.getCropBoxData();
  addTag(cropData.left, cropData.top, cropData.width, cropData.height);
});

이제 이미지에서 영역을 선택하면 태그가 추가됩니다. 태그의 위치와 크기를 원하는대로 조정하고 스타일을 변경할 수 있습니다.

결론

Cropper.js는 이미지 자르기, 확대/축소, 회전 외에도 이미지에 태그를 추가하는 기능을 제공합니다. 이 기능은 사진 편집 애플리케이션이나 이미지 갤러리 등에서 사용될 수 있습니다. Cropper.js를 사용하면 손쉽게 이미지에 태그를 추가할 수 있으며, 자유롭게 태그의 위치와 크기를 조정할 수 있습니다.

참고 자료

Cropper.js 공식 문서: https://github.com/fengyuanchen/cropperjs