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

29 Nov 2023

javascript

이미지에 블러 효과를 추가하는 것은 웹 개발에서 종종 필요한 작업입니다. 이를 위해 Cropper.js라는 JavaScript 라이브러리를 사용하여 이미지를 자르고 조작할 수 있습니다. Cropper.js는 사용자가 이미지를 선택하고 자르고 확대/축소하는 기능을 제공합니다.

Cropper.js 라이브러리 설치

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

npm install cropperjs

HTML 마크업

이미지에 블러 효과를 추가하기 위해 HTML 마크업을 작성해야 합니다. 다음은 예시입니다:

<div>
  <img id="image" src="image.jpg" alt="Image" />
</div>
<button onclick="addBlurEffect()">Add Blur Effect</button>

위의 마크업에서 image.jpg는 블러 효과를 추가할 이미지 파일의 경로입니다. Add Blur Effect 버튼은 이미지에 블러 효과를 추가하는 JavaScript 함수를 호출합니다.

JavaScript 코드

위의 HTML 마크업에 추가한 addBlurEffect 함수를 정의해야 합니다. 다음은 Cropper.js를 사용하여 이미지에 블러 효과를 추가하는 JavaScript 코드입니다:

function addBlurEffect() {
  var image = document.getElementById('image');

  var cropper = new Cropper(image, {
    aspectRatio: 16 / 9,
    crop: function(event) {
      var canvas = cropper.getCroppedCanvas();
      var blurredImage = blurImage(canvas.toDataURL());
      image.src = blurredImage;
      cropper.destroy();
    }
  });
}

function blurImage(imageDataUrl) {
  // 이미지에 블러 효과를 적용하는 로직 작성
  return blurredImageDataUrl;
}

위의 코드에서 addBlurEffect 함수는 이미지를 Cropper.js로 설정한 후, 자를 영역을 지정하고 “crop” 이벤트가 발생했을 때 호출됩니다. “crop” 이벤트가 발생하면 Cropper.js에서 자른 이미지를 받아와 blurImage 함수를 사용하여 이미지에 블러 효과를 적용합니다. 그리고 블러 효과가 적용된 이미지를 원래의 image 요소에 설정합니다.

블러 효과 적용 로직 작성

위의 코드에서는 blurImage 함수에서 이미지에 블러 효과를 적용하는 로직을 작성해야 합니다. 이 로직은 이미지 데이터 URL을 받아와 블러 효과를 적용한 뒤, 새로운 이미지 데이터 URL을 반환해야 합니다. 실제로 이미지에 블러 효과를 적용하는 방법은 다양한데, 예를 들어 CSS의 filter 속성을 사용하거나 서버 측에서 이미지를 처리할 수도 있습니다.

정리

Cropper.js를 사용하여 이미지에 블러 효과를 추가하는 방법에 대해 알아보았습니다. 이를 통해 웹 개발자들은 손쉽게 이미지를 자르고, 조작하고, 블러 효과를 적용할 수 있습니다. Cropper.js는 사용하기 쉽고 다양한 기능을 제공하여 이미지 처리에 많은 도움을 줄 수 있는 라이브러리입니다. Cropper.js의 공식 문서를 참고하여 보다 자세한 사용법을 익히는 것을 추천합니다.

참고 자료

Cropper.js 공식 문서: https://github.com/fengyuanchen/cropperjs