이미지를 흑백으로 필터링하여 색상을 제거하고 싶을 때, Cropper.js는 유용한 JavaScript 라이브러리입니다. Cropper.js는 이미지 자르기와 회전 등 이미지 편집에 다양한 기능을 제공합니다. 이번 포스트에서는 Cropper.js를 사용하여 이미지에 흑백 필터를 적용하는 방법에 대해 알아보겠습니다.

Cropper.js 설치하기

Cropper.js를 사용하기 위해서는 먼저 해당 라이브러리를 설치해야 합니다. npm을 사용하여 설치할 수 있습니다. 다음 명령어를 사용하여 Cropper.js를 설치합니다.

npm install cropperjs

HTML 마크업

이미지를 편집하고 흑백 필터를 적용하기 위해 필요한 HTML 마크업은 다음과 같습니다.

<div>
  <img id="image" src="path/to/image.jpg" />
</div>
<button id="apply-filter">흑백 필터 적용</button>

위에서 image라는 id로 이미지 요소를 정의하고, 흑백 필터를 적용하기 위한 버튼인 apply-filter를 추가합니다.

JavaScript 코드

Cropper.js를 사용하여 이미지에 흑백 필터를 적용하기 위해서는 JavaScript 코드가 필요합니다. 다음은 필요한 JavaScript 코드입니다.

import Cropper from 'cropperjs';

// 이미지 요소 선택
const imageElement = document.getElementById('image');

// Cropper 인스턴스 생성
const cropper = new Cropper(imageElement, {
  // Cropper.js 옵션 설정
});

// 흑백 필터 적용 버튼에 클릭 이벤트 리스너 추가
const applyFilterButton = document.getElementById('apply-filter');
applyFilterButton.addEventListener('click', () => {
  // 흑백 필터 적용
  const filteredImageData = cropper.getImageData({
    filters: [{
      name: 'grayscale',
      params: {
        level: 1,
      },
    }],
  });
  cropper.setImageData(filteredImageData);
});

위의 코드에서 Cropper.js 라이브러리를 import하고, 이미지 요소를 선택하고 Cropper 인스턴스를 생성합니다. 그리고 흑백 필터 적용 버튼에 클릭 이벤트 리스너를 추가하여 클릭 시 흑백 필터를 적용하는 로직을 작성합니다.

Cropper.js 옵션 설정

Cropper.js의 옵션을 설정하여 이미지를 편집하는 방법을 조정할 수 있습니다. 예를 들어, 다음과 같은 옵션을 설정할 수 있습니다.

const cropper = new Cropper(imageElement, {
  viewMode: 1,
  dragMode: 'move',
  aspectRatio: 4 / 3,
  responsive: true,
});

위의 코드에서 viewMode는 Cropper 영역의 크기와 관련된 옵션, dragMode는 드래그 모드 관련 옵션, aspectRatio는 이미지의 가로 세로 비율을 나타내는 옵션입니다.

결론

이제 Cropper.js를 사용하여 이미지에 흑백 필터를 적용하는 방법을 알아보았습니다. Cropper.js는 이미지 편집과 관련된 다양한 기능을 제공하기 때문에 웹 애플리케이션에서 이미지 편집 기능을 구현할 때 유용하게 사용할 수 있습니다.

더 자세한 내용은 Cropper.js 공식 문서를 참조해주세요.