[javascript] Cropper.js를 사용하여 이미지의 채도 조정하기

29 Nov 2023

javascript

이미지 처리와 조작은 웹 개발에서 중요한 부분입니다. 이미지를 채도 조정 하여 더 생동감 있게 만들거나, 필요한 부분을 자르는 등 다양한 작업을 수행 할 수 있습니다. 이번 블로그 포스트에서는 Cropper.js 라이브러리를 사용하여 이미지의 채도를 조정하는 방법을 알아보겠습니다.

Cropper.js란?

Cropper.js는 클라이언트 측에서 이미지를 잘라내거나 회전시키는 등의 기능을 제공하는 자바스크립트 라이브러리입니다. 크롭, 스케일링, 회전, 뒤집기 등 이미지 조작을 쉽게 할 수 있게 해줍니다. 이 라이브러리는 jQuery 플러그인으로도 사용할 수 있으며 MIT 라이센스로 무료로 사용할 수 있습니다.

Cropper.js 설치

Cropper.js를 사용하려면 먼저 해당 라이브러리를 프로젝트에 설치해야 합니다. 다음 명령을 사용하여 npm을 통해 Cropper.js를 설치할 수 있습니다.

npm install cropperjs

또는 CDN을 통해서도 사용할 수 있습니다.

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

이미지 채도 조정하기

Cropper.js를 사용하여 이미지 채도를 조정하려면 다음 단계를 수행해야 합니다.

HTML 파일에 이미지 엘리먼트 추가하기

<img id="image" src="image.jpg" alt="Image">

JavaScript 파일에서 Cropper.js 초기화하기

var image = document.getElementById('image');
var cropper = new Cropper(image, {
  // 옵션 설정
});

Cropper.js 옵션 설정하기

{
  viewMode: 2, // 채도 조정 모드 사용
  zoomable: false, // 확대/축소 비활성화
  crop: function(e) {
    // 채도 조정이 수행되었을 때 실행될 콜백 함수
  }
}

원하는 채도 수준으로 이미지를 조정합니다.

cropper.set('brightness', 0.2); // 예시로 밝기를 0.2 만큼 조정

결과 확인하기

위의 과정을 모두 완료하면 이미지의 채도가 조정된 모습을 확인할 수 있습니다. 원하는 채도 레벨에 도달하기 위해 필요한 값을 조정하고 테스트해보세요.

결론

Cropper.js를 사용하면 이미지의 채도를 조정하기가 매우 쉬워집니다. 다양한 이미지 조작 기능을 제공하는 Cropper.js는 웹 개발 프로젝트에서 유용하게 사용될 수 있습니다. 추가적인 옵션 설정이나 사용 방법은 Cropper.js 공식 문서를 참고하시면 됩니다.

참고 자료

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