[javascript] Cropper.js를 사용하여 이미지에 선형 그라데이션 효과 추가하기
이미지 편집을 위해 Cropper.js를 사용하는 경우, 이미지에 선형 그라데이션 효과를 추가하는 방법을 알아보겠습니다. Cropper.js는 사용하기 쉽고 강력한 JavaScript 라이브러리로, 이미지 자르기, 회전, 확대/축소 등의 작업을 수행할 수 있습니다.
1. Cropper.js 설치 및 설정
Cropper.js를 사용하기 위해 먼저 설치해야 합니다. 아래의 명령을 사용하여 npm을 통해 Cropper.js를 설치할 수 있습니다.
npm install cropperjs
설치가 완료되면, 필요한 HTML과 JavaScript 파일을 로드합니다.
<link rel="stylesheet" href="path/to/cropper.css">
<script src="path/to/cropper.js"></script>
2. 이미지와 그라데이션 효과 추가
HTML 파일의 body 부분에 이미지와 그라데이션 효과를 추가하는 코드를 작성합니다.
<div>
<img id="image" src="path/to/image.jpg" alt="Image">
<div id="gradient"></div>
</div>
3. JavaScript 코드 추가
이미지를 선택하고 Cropper.js를 초기화하고, 그라데이션 효과를 추가하는 JavaScript 코드를 작성합니다.
// 이미지 엘리먼트 선택
var image = document.getElementById('image');
// 이미지 로드 후 Cropper.js 초기화
image.addEventListener('load', function() {
var cropper = new Cropper(image, {
aspectRatio: NaN,
zoomable: false,
movable: false,
});
// 그라데이션 효과 추가
var $gradient = document.getElementById('gradient');
$gradient.style.background = 'linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%)';
});
// window 로드 시 Cropper.js 초기화
window.addEventListener('DOMContentLoaded', function() {
image.src = 'path/to/image.jpg';
});
4. 결과 확인
위의 코드를 실행하면, 이미지 위에 선형 그라데이션 효과가 추가됩니다. 현재 코드에서는 이미지 아래쪽에 검은색에서 투명한 그라데이션 효과가 적용되어 있습니다.
Cropper.js를 사용하여 이미지에 선형 그라데이션 효과를 추가하는 방법에 대해 알아보았습니다. 이를 통해 이미지를 추가로 편집하고 재사용할 수 있는 다양한 기능을 구현할 수 있습니다.