[javascript] Cropper.js를 사용하여 이미지에 속삭이는 효과 추가하기
이미지를 잘라내고 크롭할 수 있는 Cropper.js는 웹 개발에서 많이 사용되는 강력한 라이브러리입니다. 이 라이브러리를 사용하여 이미지에 속삭이는 효과를 추가하는 방법에 대해 알아보겠습니다.
1. Cropper.js 설치하기
Cropper.js를 사용하기 위해 먼저 해당 라이브러리를 설치해야 합니다. npm을 사용하는 경우 다음 명령어를 실행하여 설치할 수 있습니다.
npm install cropperjs
2. HTML 구조 작성하기
다음으로, 이미지를 원하는 위치에 추가하기 위해 HTML 구조를 작성해야 합니다. 아래는 예시 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>Cropper.js Example</title>
<link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css">
</head>
<body>
<h1>Image Cropper Example</h1>
<input type="file" id="imageInput">
<div>
<img id="image" src="" alt="Image">
</div>
<script src="https://unpkg.com/cropperjs/dist/cropper.js"></script>
<script src="script.js"></script>
</body>
</html>
3. JavaScript 코드 작성하기
다음으로, JavaScript 코드를 작성하여 Cropper.js를 초기화하고 이미지에 속삭이는 효과를 추가해야 합니다. 아래는 예시 코드입니다.
// script.js 파일에 작성
const imageInput = document.getElementById('imageInput');
const image = document.getElementById('image');
imageInput.addEventListener('change', function(e) {
if (e.target.files && e.target.files[0]) {
const reader = new FileReader();
reader.onload = function(e) {
image.setAttribute('src', e.target.result);
};
reader.readAsDataURL(e.target.files[0]);
}
});
let cropper;
image.addEventListener('load', function() {
cropper = new Cropper(image, {
aspectRatio: 16 / 9, // 원하는 종횡비로 조정
autoCropArea: 1,
viewMode: 3,
dragMode: 'move',
cropBoxResizable: false
});
});
image.addEventListener('mouseenter', function() {
cropper.crop();
});
image.addEventListener('mouseleave', function() {
cropper.reset();
});
4. 실행하기
이제 작성한 코드를 실행하여 이미지에 속삭이는 효과를 확인할 수 있습니다. 이미지를 선택하고 마우스를 이미지 위에 올리면 원하는 위치와 크기로 이미지가 속삭이는 효과를 가지게 됩니다.
이제 Cropper.js를 사용하여 이미지에 속삭이는 효과를 추가하는 방법에 대해 알아보았습니다. 이를 활용하여 웹 애플리케이션 또는 웹사이트에서 이미지 편집 기능을 구현할 수 있습니다.