[javascript] Cropper.js를 사용하여 이미지에 연기 색상 효과 추가하기

29 Nov 2023

javascript

Cropper.js는 이미지를 자르고 크롭하는 기능을 제공하는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하여 이미지에 연기 색상 효과를 추가할 수 있습니다.

Cropper.js 설치하기

먼저 Cropper.js를 설치해야 합니다. NPM을 사용하여 설치하는 방법은 다음과 같습니다.

npm install cropperjs

또는 CDN을 통해 Cropper.js를 로드할 수도 있습니다.

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

이미지 업로드 및 Cropper.js 초기화하기

HTML 파일에 이미지를 업로드할 input 요소와 이미지를 표시할 img 요소를 추가합니다.

<input type="file" id="imageUpload">
<img id="imagePreview">

이제 JavaScript 코드에서 Cropper.js를 초기화하고 이미지를 업로드하는 함수를 작성합니다.

const imageUpload = document.getElementById('imageUpload');
const imagePreview = document.getElementById('imagePreview');

imageUpload.addEventListener('change', handleImageUpload);

function handleImageUpload() {
  const file = this.files[0];
  const reader = new FileReader();

  reader.readAsDataURL(file);
  reader.onloadend = function () {
    imagePreview.src = reader.result;
    initCropper();
  };
}

let cropper;

function initCropper() {
  cropper = new Cropper(imagePreview, {
    // Cropper.js 옵션 설정
  });
}

위 코드에서 handleImageUpload 함수는 이미지를 업로드하고 initCropper 함수를 호출하여 Cropper.js를 초기화합니다. initCropper 함수의 인자로는 이미지를 표시할 img 요소를 전달합니다.

연기 색상 효과 추가하기

이제 Cropper.js의 옵션을 설정하여 연기 색상 효과를 추가할 수 있습니다. 예를 들어, 다음과 같이 filter 옵션을 설정하여 이미지에 그레이스케일 효과를 추가할 수 있습니다.

function initCropper() {
  cropper = new Cropper(imagePreview, {
    // Cropper.js 옵션 설정
    ready() {
      cropper.crop();
      const canvas = cropper.getCroppedCanvas({
        // 연기 색상 효과를 적용할 수 있는 filter 옵션
        filter: 'grayscale(100%)',
      });

      // 적용된 연기 색상 이미지를 표시할 요소 선택
      const container = document.getElementById('resultContainer');
      container.appendChild(canvas);
    },
  });
}

위 코드에서 ready 콜백 함수 내에서 filter 옵션을 설정하여 이미지에 그레이스케일 효과를 적용합니다. 그리고 getCroppedCanvas 메소드를 사용하여 자른 이미지에 해당 효과를 적용한 canvas 엘리먼트를 생성합니다. 생성된 canvas 엘리먼트를 표시할 요소를 선택하고 appendChild 메소드를 사용하여 추가합니다.

결론

Cropper.js를 사용하여 이미지에 연기 색상 효과를 추가하는 방법에 대해 알아보았습니다. Cropper.js를 사용하면 이미지를 더욱 다양하고 흥미로운 방식으로 편집할 수 있습니다. 자세한 내용은 Cropper.js 공식 문서를 참조하세요.