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

29 Nov 2023

javascript

이미지에 라벨을 추가하고 싶다면 Cropper.js 라이브러리를 사용할 수 있습니다. Cropper.js는 이미지를 자르고 크롭하는 기능을 제공하며, 추가로 이미지에 라벨을 추가할 수 있는 기능도 제공합니다. 이 튜토리얼에서는 Cropper.js를 사용하여 이미지에 라벨을 추가하는 방법을 알아보겠습니다.

Cropper.js 설치하기

npm install cropperjs

HTML에 Cropper.js 추가하기

<!DOCTYPE html>
<html>
<head>
  <title>Cropper.js Example</title>
  <link href="cropper.css" rel="stylesheet">
</head>
<body>
  <img id="image" src="image.jpg">
  <script src="cropper.js"></script>
  <script src="script.js"></script>
</body>
</html>

JavaScript로 Cropper.js 초기화하기

var image = document.getElementById('image');
var cropper = new Cropper(image, {
  aspectRatio: 16 / 9,
  crop: function(event) {
    // 라벨 추가 코드 작성
  }
});

라벨 추가하기

function addLabel() {
  var imageData = cropper.getCroppedCanvas().toDataURL();
  var label = document.createElement('div');
  label.textContent = 'Label';
  label.style.position = 'absolute';
  label.style.top = event.detail.y + 'px';
  label.style.left = event.detail.x + 'px';
  label.style.color = 'white';
  label.style.fontWeight = 'bold';
  label.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
  label.style.padding = '10px';
  image.parentNode.appendChild(label);
}

Cropper.js에 라벨 추가 이벤트 바인딩하기

cropper.on('crop', addLabel);

위의 코드를 참고하여 Cropper.js를 사용하여 이미지에 라벨을 추가하는 방법을 배웠습니다. 이제 원하는 위치에 라벨을 추가하고 스타일을 설정하여 원하는대로 커스터마이즈할 수 있습니다. Cropper.js의 다양한 기능을 활용하여 더욱 다양한 작업을 수행할 수 있습니다.

참고 자료

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