[javascript] Cropper.js를 사용하여 이미지에 노출 영역 조정하기
이미지를 웹페이지에 표시할 때, 종종 이미지의 일부분만을 보여주고 싶을 때가 있습니다. 이럴 때 Cropper.js라는 라이브러리를 사용하여 이미지의 노출 영역을 조정할 수 있습니다.
Cropper.js는 JavaScript를 사용하여 이미지를 잘라내거나 회전시키거나 확대/축소하는 기능을 제공합니다. 그리고 Canvas를 사용하여 이미지를 렌더링하므로, 브라우저에서 바로 사용할 수 있습니다.
Cropper.js 라이브러리 설치
먼저, Cropper.js를 설치해야 합니다. 아래의 명령어를 사용하여 npm을 통해 Cropper.js를 설치합니다.
npm install cropperjs
Cropper.js를 사용한 이미지 노출 영역 조정하기
다음은 Cropper.js를 사용하여 이미지의 노출 영역을 조정하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">
</head>
<body>
<input type="file" id="inputImage">
<div id="preview"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
<script>
var inputImage = document.getElementById('inputImage');
var preview = document.getElementById('preview');
var cropper;
inputImage.addEventListener('change', function (e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var img = new Image();
img.onload = function() {
if (cropper) {
cropper.destroy();
}
preview.innerHTML = '';
preview.appendChild(img);
cropper = new Cropper(img, {
aspectRatio: 16 / 9,
zoomable: false,
autoCropArea: 1,
crop: function(e) {
// Crop 이벤트 처리
console.log(e.detail.x);
console.log(e.detail.y);
console.log(e.detail.width);
console.log(e.detail.height);
}
});
}
img.src = e.target.result;
}
reader.readAsDataURL(file);
});
</script>
</body>
</html>
위의 예제에서는 Cropper.js를 사용하여 파일 입력란을 만들고, 선택한 이미지의 노출 영역을 조정하는 기능을 제공합니다. 선택한 이미지는 미리보기 영역에 표시되며, 영역 선택을 마치면 Crop 이벤트가 발생하여 선택한 영역의 좌표와 크기를 출력합니다.
결론
Cropper.js를 사용하면 이미지의 노출 영역을 쉽게 조정할 수 있습니다. 이미지 편집 기능이 필요한 웹 애플리케이션에서 유용하게 사용할 수 있는 라이브러리입니다.