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

29 Nov 2023

javascript

이미지에 동글뱅이 효과를 추가하고 싶다면 JavaScript 라이브러리인 Cropper.js를 사용할 수 있습니다. Cropper.js는 이미지를 자르고 회전시키는 기능을 제공하여 원하는 동글뱅이 효과를 쉽게 만들 수 있습니다. 이번 블로그 포스트에서는 Cropper.js를 사용하여 이미지에 동글뱅이 효과를 추가하는 방법을 알아보도록 하겠습니다.

Cropper.js 설치하기

Cropper.js를 사용하기 위해서는 먼저 해당 라이브러리를 프로젝트에 설치해야 합니다. 아래와 같이 npm을 사용하여 Cropper.js를 설치할 수 있습니다.

npm install cropperjs

HTML과 JavaScript 설정하기

다음으로, 이미지를 표시하고 Cropper.js를 초기화하기 위한 HTML 코드를 작성해야 합니다. 예를 들어, 다음과 같은 구조를 가진 HTML 파일을 만들어보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cropper.js를 사용하여 이미지에 동글뱅이 효과 추가하기</title>
  <link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css">
</head>
<body>
  <div>
    <img id="image" src="path/to/image.jpg" alt="이미지">
  </div>

  <script src="https://unpkg.com/cropperjs/dist/cropper.js"></script>
  <script src="app.js"></script>
</body>
</html>

위의 코드에서는 이미지를 표시할 div와 이미지를 지정할 img 요소를 생성하였습니다. 또한, Cropper.js의 스타일시트와 스크립트 파일을 추가하였습니다. 마지막으로 app.js 파일을 생성하여 Cropper.js를 사용하여 이미지에 동글뱅이 효과를 추가하는 JavaScript 코드를 작성해보겠습니다.

window.addEventListener('DOMContentLoaded', (event) => {
  const image = document.getElementById('image');
  const cropper = new Cropper(image, {
    aspectRatio: 1,
    autoCropArea: 1,
    viewMode: 3,
    minContainerWidth: 300,
    minContainerHeight: 300,
    zoomable: false,
    movable: false,
    rotatable: true,
    scalable: false,
    cropBoxResizable: false,
    cropBoxMovable: false,
    ready: function () {
      cropper.rotateTo(45);
    },
  });
});

위의 코드에서는 DOMContentLoaded 이벤트를 통해 페이지가 로드되었을 때 실행되는 JavaScript 코드입니다. window.addEventListener 함수를 사용하여 페이지가 로드되었을 때 콜백함수를 실행하도록 합니다. 그 후, document.getElementById 함수를 사용하여 이미지 요소를 가져옵니다. 그리고, new Cropper를 통해 Cropper.js를 초기화하며, 동글뱅이 효과를 추가할 이미지의 기본 설정을 지정합니다. 위의 예제에서는 이미지의 가로세로 비율을 1:1로 설정하고, 얼굴 부분을 자동으로 자르도록 지정하였습니다. 또한, 이미지의 크기 및 이동, 회전, 확대/축소 기능을 제한했습니다. 이후, ready 콜백함수 내부에서 이미지를 45도로 회전시키도록 설정하였습니다.

결과 확인하기

위의 설정을 마친 후, 웹 브라우저에서 HTML 파일을 실행하면 이미지에 동글뱅이 효과가 추가된 것을 확인할 수 있습니다. 필요에 따라 Cropper.js의 다양한 옵션을 설정하고, JavaScript 코드를 수정하여 추가적인 효과를 적용할 수 있습니다. 자세한 Cropper.js 옵션 및 사용법은 Cropper.js 공식 문서에서 확인할 수 있습니다.

이와 같이 Cropper.js를 사용하여 이미지에 동글뱅이 효과를 추가하는 방법을 알아보았습니다. Cropper.js를 이용하면 쉽게 자르기 및 회전 효과를 구현할 수 있으므로, 웹 애플리케이션에서 이미지 처리 기능을 개발할 때 유용하게 활용할 수 있습니다.