[javascript] Cropper.js를 사용하여 이미지에 커스텀 필터 적용하기

29 Nov 2023

javascript

이미지 크롭 및 필터 기능을 제공하는 Cropper.js는 웹 개발자에게 많은 도움을 주는 인기있는 라이브러리입니다. 이번 글에서는 Cropper.js를 사용하여 이미지에 커스텀 필터를 적용하는 방법에 대해 알아보겠습니다.

Cropper.js란?

Cropper.js는 HTML5 Canvas와 JavaScript를 사용하여 이미지를 자르고 편집할 수 있는 라이브러리입니다. 이 라이브러리를 사용하면 이미지를 자르고 회전시키는 등 다양한 편집 작업을 수행할 수 있습니다.

Cropper.js 설치 및 초기화

먼저, Cropper.js를 설치하고 초기화하는 방법에 대해 알아보겠습니다. Cropper.js는 NPM으로 설치할 수 있으며, 다음 명령어를 사용하여 설치할 수 있습니다.

npm install cropperjs

설치가 완료되면 HTML 파일에 다음 코드를 추가하여 Cropper.js를 초기화할 수 있습니다.

<link rel="stylesheet" href="path/to/cropper.css">
<script src="path/to/cropper.js"></script>

<!-- 이미지를 불러올 엘리먼트 -->
<img id="image" src="path/to/image.jpg">

자바스크립트 코드에서는 다음과 같이 Cropper.js를 초기화할 수 있습니다.

var image = document.getElementById('image');
var cropper = new Cropper(image, {
  aspectRatio: 16 / 9,
});

위의 코드에서 aspectRatio는 이미지의 가로 세로 비율을 설정하는 옵션입니다.

커스텀 필터 적용하기

이제 이미지에 커스텀 필터를 적용하는 방법에 대해 알아보겠습니다. Cropper.js는 이미지를 처리하는데 사용되는 getCroppedCanvas 메서드를 제공합니다. 이 메서드를 사용하여 이미지를 자른 후에 필터를 적용할 수 있습니다.

// 이미지 자르기
var croppedCanvas = cropper.getCroppedCanvas();

// 필터 적용
croppedCanvas.getContext('2d').filter = 'brightness(150%)';

// 필터 적용된 이미지 다운로드
croppedCanvas.toBlob(function (blob) {
  var url = URL.createObjectURL(blob);
  var link = document.createElement('a');
  link.href = url;
  link.download = 'filtered-image.jpg';
  link.click();
});

위의 코드에서 filter 프로퍼티에 필터를 적용하여 이미지를 변경할 수 있습니다. 필터를 적용한 후에는 toBlob 메서드를 사용하여 이미지를 다운로드할 수 있습니다.

결론

Cropper.js를 사용하여 이미지에 커스텀 필터를 적용하는 방법에 대해 간단히 알아보았습니다. Cropper.js를 사용하면 이미지 편집 기능을 손쉽게 구현할 수 있으며, 필요에 따라 필터를 적용하여 원하는 스타일을 만들 수 있습니다.

더 많은 Cropper.js의 기능에 대해서는 공식 문서를 참고하시기 바랍니다.

참고 자료: