[javascript] Cropper.js를 사용하여 이미지에 원형 그라데이션 효과 추가하기

29 Nov 2023

javascript

이 튜토리얼에서는 Cropper.js 라이브러리를 사용하여 이미지에 원형 그라데이션 효과를 추가하는 방법을 알아보겠습니다.

Cropper.js이란?

Cropper.js는 클라이언트 측에서 이미지를 자르고 크롭할 수 있도록 도와주는 자바스크립트 라이브러리입니다. 이미지의 일부분을 선택하여 자를 수 있으며, 이미지 크롭에 대한 다양한 기능을 제공합니다.

시작하기

먼저 Cropper.js를 프로젝트에 추가해야 합니다. 다음과 같이 HTML 파일에 스크립트 태그를 추가하여 Cropper.js를 로드합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.js"></script>

그리고 이미지를 포함할 img 태그를 추가합니다.

<img id="image" src="example.jpg">

Cropper.js 초기화

Cropper.js를 초기화하여 이미지에 원형 그라데이션 효과를 추가할 준비를 합니다. 스크립트 태그를 추가하여 다음과 같은 코드를 작성합니다.

var image = document.getElementById('image');
var cropper = new Cropper(image, {
  aspectRatio: 1,
  viewMode: 1,
  crop: function(e) {
    // 이미지가 자를 크기로 변경될 때마다 호출되는 콜백 함수
    // 이곳에서 원형 그라데이션 효과를 추가합니다.
    var imageData = cropper.getCroppedCanvas().toDataURL();
    var circleGradient = 'radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%)';
    image.style.backgroundImage = circleGradient + ', url(' + imageData + ')';
  }
});

위 코드는 image 요소를 Cropper.js 인스턴스의 첫 번째 인자로 전달하여 Cropper.js를 초기화합니다. aspectRatio 옵션을 1로 설정하여 이미지를 원형으로 자를 수 있게 하고, crop 이벤트가 발생할 때마다 호출되는 함수를 작성합니다. 이 함수에서는 이미지의 자른 부분을 canvas로 가져와서 원형 그라데이션 효과를 추가합니다.

결과 확인하기

이제 이미지를 자르고 크롭할 수 있는 Cropper.js를 사용하여 이미지에 원형 그라데이션 효과가 추가되었습니다. 웹 브라우저에서 HTML 페이지를 열어 이미지를 클릭하고 드래그하여 이미지를 자르고 그라데이션 효과를 적용해 보세요.

참고 자료

Cropper.js 공식 문서