이미지 편집 기능을 구현할 때 종종 이미지의 모서리를 원하는 모양으로 만들어야 할 때가 있습니다. 이를 위해 Cropper.js라는 강력한 라이브러리를 사용할 수 있습니다. Cropper.js는 이미지 자르기, 회전, 확대 축소, 모서리 처리 등 다양한 이미지 편집 기능을 제공합니다.
Cropper.js란?
Cropper.js는 웹 페이지에서 사용자가 이미지를 편집할 수 있도록 도와주는 JavaScript 라이브러리입니다. 이미지 자르기, 회전, 확대 축소, 필터 추가 등의 기능을 제공하며, 사용하기 쉬우면서도 강력한 기능을 제공합니다.
Cropper.js 설치
Cropper.js를 사용하기 위해서는 먼저 해당 라이브러리를 설치해야 합니다. 다음의 명령어를 사용하여 npm을 통해 Cropper.js를 설치합니다:
npm install cropperjs
Cropper.js 사용 예제
다음은 Cropper.js를 사용하여 이미지에 모서리 효과를 추가하는 간단한 예제입니다:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.min.css">
</head>
<body>
<input type="file" id="image-input">
<div id="cropper-container">
<img id="image">
</div>
<script src="https://unpkg.com/cropperjs/dist/cropper.min.js"></script>
<script>
const imageInput = document.getElementById('image-input');
const cropperContainer = document.getElementById('cropper-container');
const image = document.getElementById('image');
imageInput.addEventListener('change', function(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function(e) {
image.src = e.target.result;
const cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 1,
crop: function(event) {
console.log(event.detail.x);
console.log(event.detail.y);
console.log(event.detail.width);
console.log(event.detail.height);
console.log(event.detail.rotate);
console.log(event.detail.scaleX);
console.log(event.detail.scaleY);
}
});
};
reader.readAsDataURL(file);
});
</script>
</body>
</html>
위의 예제에서는 파일 입력(input type=”file”)을 통해 이미지를 선택하면 Cropper.js를 초기화하여 이미지를 화면에 표시합니다. 그리고 aspectRatio, viewMode 등의 옵션을 설정하여 사용자가 이미지를 편집할 수 있도록 합니다. 편집한 결과는 crop 이벤트 핸들러에서 확인할 수 있습니다.
Cropper.js의 기능과 옵션에 대한 자세한 내용은 Cropper.js 공식 문서를 참고하세요.
위의 예제를 실행해보면 파일 선택 후 이미지가 화면에 표시되고 사용자가 마우스로 드래그하여 이미지를 자를 수 있습니다. 이렇게 Cropper.js를 사용하면 이미지에 원하는 모서리 효과를 손쉽게 추가할 수 있습니다.