[javascript] Cropper.js를 사용하여 이미지에 텍스트 추가하기

29 Nov 2023

javascript

이미지를 편집하고 텍스트를 추가하는 웹 애플리케이션을 개발하고 싶다면, Cropper.js는 좋은 선택일 수 있습니다. Cropper.js는 이미지를 자르고 회전시키는 기능을 제공하며, 사용자가 지정한 위치에 텍스트를 추가할 수 있도록 도와줍니다.

Cropper.js 설치하기

먼저, Cropper.js를 사용하기 위해 다음과 같이 코드를 추가해야 합니다.

<link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.js"></script>

위 코드는 Cropper.js의 스타일시트와 JavaScript 파일을 불러오는 코드입니다.

이미지 업로드 및 텍스트 추가하기

다음으로, 이미지를 업로드하고 텍스트를 추가하는 코드를 작성해보겠습니다.

<input type="file" id="image-input">
<div id="image-container"></div>
<textarea id="text-input" placeholder="텍스트를 입력하세요"></textarea>
<button id="add-text-btn">텍스트 추가</button>

<script>
// 이미지 업로드하기
const imageInput = document.getElementById('image-input');
const imageContainer = document.getElementById('image-container');

imageInput.addEventListener('change', function(e) {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = function(event) {
    const img = document.createElement('img');
    img.src = event.target.result;
    img.id = 'cropper-image';
    img.style.width = '100%';

    imageContainer.innerHTML = '';
    imageContainer.appendChild(img);

    const cropper = new Cropper(img);
  }

  reader.readAsDataURL(file);
});

// 텍스트 추가하기
const addTextBtn = document.getElementById('add-text-btn');
const textInput = document.getElementById('text-input');

addTextBtn.addEventListener('click', function() {
  const img = document.getElementById('cropper-image');
  const text = textInput.value;

  const canvas = cropper.getCroppedCanvas();
  const ctx = canvas.getContext('2d');

  ctx.font = '30px Arial';
  ctx.fillStyle = 'white';
  ctx.fillText(text, 100, 100);

  const newDataUrl = canvas.toDataURL('image/jpeg');

  img.src = newDataUrl;
});
</script>

위 코드는 이미지를 업로드하고 Cropper.js로 이미지를 자르고 회전시키는 기능을 추가하는 코드입니다. 텍스트를 추가하기 위해 textarea와 버튼을 사용했습니다. ‘텍스트 추가’ 버튼을 클릭하면 Cropper.js가 제공하는 getCroppedCanvas 메서드를 사용하여 이미지를 자른 후, 자른 이미지에 텍스트를 추가하고 결과를 업데이트합니다.

결론

이상으로, Cropper.js를 사용하여 이미지에 텍스트를 추가하는 방법에 대해 알아보았습니다. Cropper.js는 이미지 편집에 굉장히 유용하며, 텍스트 추가와 같은 기능을 쉽게 구현할 수 있습니다. 자신의 웹 애플리케이션에 이미지 편집 기능을 추가하고 싶다면, Cropper.js를 고려해보세요.

참고 자료

Cropper.js 공식 문서