[javascript] Cropper.js를 사용하여 이미지에 빛나는 효과 추가하기

29 Nov 2023

javascript

이미지에 특별한 효과를 추가하고 싶다면 Cropper.js라는 JavaScript 라이브러리를 사용해보세요. Cropper.js는 이미지를 자르고, 확대/축소하며, 회전하는 기능을 제공하는 강력한 도구입니다. 이 튜토리얼에서는 이미지에 빛나는 효과를 추가하는 방법을 알아보겠습니다.

Cropper.js 설치하기

먼저, Cropper.js를 사용하기 위해 HTML 파일에 다음 두 가지 파일을 추가해야 합니다.

<script src="https://cdn.jsdelivr.net/npm/cropperjs@1.5.8/dist/cropper.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cropperjs@1.5.8/dist/cropper.min.css">

이미지 업로드 및 Cropper.js 초기화하기

HTML 파일에 이미지를 업로드하는 input 요소와 이미지를 표시할 div 요소를 추가합니다.

<input type="file" id="imageInput">
<div id="imagePreview"></div>

다음으로, JavaScript 코드를 사용하여 이미지를 업로드하고 Cropper.js를 초기화합니다.

const imageInput = document.getElementById('imageInput');
const imagePreview = document.getElementById('imagePreview');

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

  reader.onload = function(event) {
    const img = document.createElement('img');
    img.src = event.target.result;
    imagePreview.innerHTML = '';
    imagePreview.appendChild(img);

    // Cropper.js 초기화
    const cropper = new Cropper(img, {
      // Cropper.js 옵션 설정
      // 여기에서는 특별한 효과를 추가하기 위한 옵션을 사용합니다.
    });
  }

  reader.readAsDataURL(file);
});

빛나는 효과 추가하기

이제 Cropper.js를 초기화하는 데 성공했으니, 이미지에 빛나는 효과를 추가해봅시다. Cropper.js에서는 crop 이벤트를 사용하여 자르기 영역이 변경될 때마다 새로운 이미지를 생성할 수 있습니다.

const cropper = new Cropper(img, {
  crop(event) {
    const canvas = cropper.getCroppedCanvas();
    const context = canvas.getContext('2d');
    const imageData = context.getImageData(0, 0, canvas.width, canvas.height);

    // 빛나는 효과를 위해 이미지 데이터 조작
    for (let i = 0; i < imageData.data.length; i += 4) {
      imageData.data[i] += 50; // 빨간색 증가
      imageData.data[i + 1] += 50; // 초록색 증가
      imageData.data[i + 2] += 50; // 파란색 증가
    }

    // 변경된 이미지 데이터를 다시 캔버스에 그리기
    context.putImageData(imageData, 0, 0);

    // 변경된 이미지를 미리 보기에 반영하기
    const previewImg = document.createElement('img');
    previewImg.src = canvas.toDataURL();
    imagePreview.innerHTML = '';
    imagePreview.appendChild(previewImg);
  }
});

위 코드에서는 crop 이벤트가 발생할 때마다 이미지 데이터를 조작하여 빛나는 효과를 추가합니다. 이렇게 변경된 이미지는 캔버스에 그려지고, 그 후 미리 보기에 반영됩니다.

결론

Cropper.js를 사용하여 이미지에 빛나는 효과를 추가하는 방법을 알아보았습니다. 이제 여러분은 Cropper.js를 활용하여 더욱 멋진 이미지 효과를 구현할 수 있을 것입니다.