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

29 Nov 2023

javascript

이미지 편집을 위해 Cropper.js는 많은 유용한 기능을 제공합니다. 이 중에서도 특히 이미지에 잉크 효과를 추가하는 기능은 많은 사용자들에게 인기가 있습니다. Cropper.js는 사용하기 쉽고 다양한 효과를 적용할 수 있는 강력한 도구입니다. 이제 Cropper.js를 사용하여 이미지에 잉크 효과를 추가하는 방법에 대해 알아보겠습니다.

1. Cropper.js 설치하기

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

npm install cropperjs

2. HTML에 이미지 추가하기

잉크 효과를 추가할 이미지를 HTML 파일에 추가합니다. 예를 들어, 다음과 같이 <img> 태그를 사용하여 이미지를 추가할 수 있습니다.

<img src="path/to/image.jpg" id="image" alt="My Image">

3. Cropper.js 초기화하기

이제 Cropper.js를 사용하여 이미지에 잉크 효과를 추가하기 위해 스크립트를 작성합니다. 아래의 코드 예제는 Cropper.js를 초기화하는 방법을 보여줍니다.

const imageElement = document.getElementById('image');
const cropper = new Cropper(imageElement, {
   aspectRatio: 1,
   viewMode: 1,
   dragMode: 'move',
   cropBoxResizable: false,
   guides: false,
   zoomable: false,
   toggleDragModeOnDblclick: false,
   crop: function(event) {
      // Crop 이벤트 핸들러
   }
});

위 코드에서 image는 이미지 요소의 ID입니다. 이를 통해 Cropper.js를 초기화하고 필요한 설정을 적용할 수 있습니다. 위의 예제에서는 잉크 효과를 추가하기 위해 aspectRatio를 1로 설정하였고, viewMode를 1로 설정하여 사각형 영역으로 자르도록 하였습니다.

4. 잉크 효과 적용하기

Cropper.js에서 제공하는 잉크 효과를 적용하기 위해서는 crop 이벤트 핸들러에서 이미지를 처리해야 합니다. 다음은 한 가지 예시입니다.

cropper.options.crop = function(event) {
   const imageData = cropper.getCroppedCanvas().toDataURL();
   const inkEffectCanvas = applyInkEffect(imageData);
   document.body.appendChild(inkEffectCanvas);
}

위의 예제 코드에서 getCropperCanvas 함수를 사용하여 자른 이미지의 데이터 URL을 가져오고, applyInkEffect 함수를 사용하여 잉크 효과가 적용된 캔버스 요소를 생성합니다. 마지막으로, 잉크 효과가 적용된 캔버스 요소를 HTML 문서에 추가합니다.

5. 잉크 효과 적용하기 예시

잉크 효과를 적용하기 위해서는 다양한 방법이 있습니다. 여기서는 CSS를 사용하여 잉크 효과를 적용하는 예시를 보여드리겠습니다.

function applyInkEffect(imageData) {
   const canvas = document.createElement('canvas');
   const context = canvas.getContext('2d');

   const image = new Image();
   image.src = imageData;
   image.onload = function() {
      canvas.width = image.width;
      canvas.height = image.height;

      context.drawImage(image, 0, 0, image.width, image.height);

      context.globalCompositeOperation = 'multiply';
      context.fillStyle = 'rgba(0, 0, 0, 0.2)';
      context.fillRect(0, 0, image.width, image.height);

      context.globalCompositeOperation = 'destination-over';
      context.drawImage(image, 0, 0, image.width, image.height);

      // 추가적인 잉크 효과 적용 가능

      // Return the canvas element with ink effect
      return canvas;
   };
}

위의 예시 코드는 입력된 이미지 데이터를 기반으로 캔버스 요소를 생성하고, globalCompositeOperation를 사용하여 잉크 효과를 적용합니다. 이 예시에서는 multiply와 destination-over를 사용하여 이미지에 블렌딩 효과와 오버레이를 적용하였습니다. 추가적인 잉크 효과를 적용하고자 한다면 해당 부분을 수정하여 사용하면 됩니다.

결론

Cropper.js를 사용하여 이미지에 잉크 효과를 추가하는 방법에 대해 알아보았습니다. Cropper.js는 다양한 이미지 효과를 적용할 수 있는 강력한 도구이므로 이를 통해 웹 애플리케이션에 재미있는 이미지 편집 기능을 추가해 보세요.

참고문서:

Cropper.js GitHub 페이지