[javascript] Cropper.js를 사용하여 이미지의 픽셀 수 줄이기

29 Nov 2023

javascript

이미지 크기를 줄이는 것은 웹 개발에서 중요한 과제 중 하나입니다. 웹 페이지의 로딩 속도를 개선하고 사용자 경험을 향상시키기 위해 이미지의 픽셀 수를 줄이는 작업이 필요합니다. Cropper.js는 이미지에 쉽게 자르기 및 크롭 기능을 추가할 수 있는 JavaScript 라이브러리입니다.

Cropper.js란?

Cropper.js는 사용자가 이미지를 선택하고 자르기 또는 크롭하는 기능을 제공하는 강력한 JavaScript 라이브러리입니다. 사용자가 선택한 영역을 기반으로 이미지 파일을 자르거나 크롭하여 필요한 영역만을 보여줄 수 있습니다.

Cropper.js 설치하기

Cropper.js는 npm을 통해 설치할 수 있습니다. 아래 명령을 사용하여 Cropper.js를 설치하세요.

npm install cropperjs

또는 CDN을 통해 Cropper.js를 사용할 수도 있습니다. 아래 스크립트를 웹 페이지의 <head> 태그 내에 추가하세요.

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

Cropper.js를 사용하기 위해 이미지를 선택할 수 있는 HTML 구조를 작성하세요.

<input type="file" id="imageInput" accept="image/*" />

<img id="previewImage" src="" alt="Preview Image" />

Cropper.js 사용하기

JavaScript 파일에서 Cropper.js를 초기화하고 이미지를 픽셀 수로 자르는 기능을 추가하세요.

const imageInput = document.getElementById('imageInput');
const previewImage = document.getElementById('previewImage');
const cropper = new Cropper(previewImage, {
  aspectRatio: 16 / 9, // 자르기 비율
  crop(event) {
    const croppedCanvas = cropper.getCroppedCanvas({
      width: 800, // 최대 너비
      height: 450 // 최대 높이
    });
    // 이미지 결과를 저장하거나 표시하는 로직 추가
    // croppedCanvas.toDataURL()을 사용하여 이미지를 문자열로 변환할 수 있습니다.
  }
});

imageInput.addEventListener('change', function() {
  const file = this.files[0];
  const reader = new FileReader();
  reader.onload = function(event) {
    previewImage.src = event.target.result;
    cropper.replace(event.target.result);
  };
  reader.readAsDataURL(file);
});

위의 코드는 이미지 파일을 선택하고 자르기 비율과 최대 크기를 설정한 뒤, getCroppedCanvas 메서드를 사용하여 자른 이미지를 가져와서 추가적인 로직을 수행합니다.

이제 Cropper.js를 사용하여 이미지의 픽셀 수를 줄이는 기능을 구현할 수 있습니다. 사용자가 선택한 영역만을 보여주는 자세한 예제 및 문서는 Cropper.js 공식 문서에서 확인할 수 있습니다.

참고: Cropper.js는 jQuery가 필요하지 않습니다. 순수 JavaScript로도 사용할 수 있습니다.

결론

Cropper.js를 사용하면 이미지의 픽셀 수를 손쉽게 줄일 수 있습니다. 이미지를 자르고 크롭하는 기능을 웹 애플리케이션에 적용하여 사용자가 필요한 부분만을 보여줄 수 있습니다. Cropper.js의 강력한 기능을 활용하여 웹 페이지의 로딩 속도를 개선하고 사용자 경험을 향상시킬 수 있습니다.