Cropper.js는 JavaScript로 작성된 이미지 편집 라이브러리입니다. 이 라이브러리를 사용하면 사용자가 이미지를 자르고, 회전시키고, 확대/축소할 수 있습니다.
이번에는 Cropper.js를 사용하여 이미지의 밝기를 조정하는 방법에 대해 알아보겠습니다.
Cropper.js 설치
Cropper.js를 사용하기 위해 먼저 해당 라이브러리를 설치해야 합니다. NPM을 사용하는 경우 아래 명령어를 사용하여 Cropper.js를 설치할 수 있습니다.
npm install cropperjs
HTML 마크업
우선, 이미지를 편집할 수 있는 영역을 마크업하겠습니다.
<div>
<img id="image" src="image.jpg" alt="이미지" />
</div>
<button id="brightness-up">밝기 증가</button>
<button id="brightness-down">밝기 감소</button>
위 예제에서는 이미지를 감싸는 <div> 요소와 밝기를 조정하기 위한 버튼들을 추가하였습니다. 이미지의 원본 경로를 src 속성에 지정하시면 됩니다.
스크립트 작성
이제 스크립트를 작성하여 Cropper.js를 초기화하고 밝기를 조정하는 기능을 추가해보겠습니다.
import Cropper from 'cropperjs';
const image = document.getElementById('image');
const brightnessUpButton = document.getElementById('brightness-up');
const brightnessDownButton = document.getElementById('brightness-down');
// Cropper.js 인스턴스 생성
const cropper = new Cropper(image, {
viewMode: 1,
zoomable: false,
});
// 밝기 증가 버튼 클릭 이벤트 핸들러
brightnessUpButton.addEventListener('click', () => {
const imageData = cropper.getImageData();
const brightness = imageData.brightness || 0;
// 이미지 밝기를 0.1씩 증가
const newBrightness = brightness + 0.1;
cropper.brightness(newBrightness);
});
// 밝기 감소 버튼 클릭 이벤트 핸들러
brightnessDownButton.addEventListener('click', () => {
const imageData = cropper.getImageData();
const brightness = imageData.brightness || 0;
// 이미지 밝기를 0.1씩 감소
const newBrightness = brightness - 0.1;
cropper.brightness(newBrightness);
});
위 스크립트는 Cropper.js 인스턴스를 생성하고, 밝기를 증가/감소하는 기능을 추가하는 예제입니다.
동작 확인
이제 HTML 파일을 열어서 이미지를 편집할 수 있는 화면을 확인해보세요. 밝기를 증가/감소하는 버튼을 클릭하면 이미지의 밝기가 조정되는 것을 확인할 수 있습니다.
결론
이번 포스트에서는 Cropper.js를 사용하여 이미지의 밝기를 조정하는 방법을 알아보았습니다. Cropper.js는 사용자 친화적인 인터페이스를 제공하며 다양한 이미지 편집 기능을 지원합니다. 밝기 조정 외에도 크롭, 회전, 확대/축소 등 다양한 편집 기능을 Cropper.js를 통해 구현할 수 있습니다.
더 많은 기능과 사용 방법은 Cropper.js 공식 문서를 참고하시기 바랍니다.
Cropper.js 공식 문서: https://github.com/fengyuanchen/cropperjs