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

29 Nov 2023

javascript

에어 브러시 이미지

이번 기술 블로그에서는 Cropper.js라는 JavaScript 라이브러리를 사용하여 이미지에 에어 브러시 효과를 추가하는 방법을 소개하고자 합니다. Cropper.js는 이미지의 일부분을 자르고 확대/축소할 수 있는 기능을 제공하는 라이브러리로, 이미지 편집기나 프로필 사진 편집기 등에 유용하게 사용될 수 있습니다.

Cropper.js 소개

Cropper.js는 오픈 소스 JavaScript 라이브러리로, 이미지 자르기 및 확대/축소 기능을 제공합니다. 이 라이브러리는 jQuery나 Vanilla JavaScript를 사용하여 손쉽게 사용할 수 있습니다. 또한, 다양한 옵션을 제공하여 자유롭게 이미지를 편집할 수 있습니다.

에어 브러시 효과 구현하기

이제 Cropper.js를 사용하여 이미지에 에어 브러시 효과를 추가해 보겠습니다. 먼저, HTML 파일에 Cropper.js 라이브러리와 이미지를 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <title>Cropper.js 에어 브러시 효과</title>
  <link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css">
</head>
<body>
  <div>
    <img id="image" src="https://example.com/image.jpg" alt="이미지">
  </div>

  <script src="https://unpkg.com/cropperjs/dist/cropper.js"></script>
  <script>
    var image = document.getElementById('image');
    var cropper = new Cropper(image, {
      zoomable: false, // 확대/축소 비활성화
      dragMode: 'move', // 이동 모드로 설정
      cropBoxMovable: false, // 자르기 박스 이동 비활성화
      cropBoxResizable: false // 자르기 박스 크기 조절 비활성화
    });
  </script>
</body>
</html>

위의 코드에서는 Cropper.js 라이브러리와 이미지를 가져와 <div> 요소 내에 표시하고, Cropper 객체를 생성합니다. 변수 cropper의 옵션을 사용하여 확대/축소와 이동, 자르기 박스 이동 및 크기 조절을 설정하였습니다.

만약 에어 브러시 효과를 적용하고자 하는 부분이 특정한 영역 내에 있는 경우, data-crop-box 속성을 사용하여 Cropper.js에 해당 영역을 지정할 수 있습니다.

<div data-crop-box="true">
  <img id="image" src="https://example.com/image.jpg" alt="이미지">
</div>

이제 에어 브러시 효과를 적용하려는 부분에 사용할 브러시 이미지를 선택하고, JavaScript 코드에서 해당 이미지를 Cropper.js에 추가하면 됩니다.

var brushImage = new Image();
brushImage.src = 'https://example.com/airbrush.png';

cropper.on('ready', function () {
  cropper.getCropBoxData().width -= brushImage.width;
  cropper.getCropBoxData().height -= brushImage.height;
  cropper.getCropBoxData().top += (brushImage.height / 2);
  cropper.getCropBoxData().left += (brushImage.width / 2);
  cropper.getCropBoxData().fillColor = 'transparent';

  var ctx = cropper.getCropBoxCanvas().getContext('2d');
  ctx.drawImage(brushImage, 0, 0);
});

위의 코드에서는 Cropper 객체의 ready 이벤트를 사용하여 에어 브러시 효과를 적용할 준비가 되면 해당 부분의 크기와 위치를 조정하고, 투명한 배경을 설정한 후 브러시 이미지를 그립니다.

이제 Cropper.js를 사용하여 이미지에 에어 브러시 효과를 추가하는 방법을 알게 되었습니다. Cropper.js는 다양한 옵션과 기능을 제공하므로, 자세한 사용 방법은 공식 문서를 참조하시기 바랍니다.

참고문헌

Cropper.js 공식 문서