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

29 Nov 2023

javascript

이미지에 스트로크 효과를 추가하기 위해 Cropper.js를 사용하는 방법에 대해 알아보겠습니다.

Cropper.js란 Javascript로 작성된 이미지 크롭 라이브러리로, 웹 페이지에서 이미지를 선택하고 편집할 수 있는 기능을 제공합니다. 이 라이브러리를 사용하여 이미지에 스트로크 효과를 추가할 수 있습니다.

Cropper.js 설치

Cropper.js를 사용하기 위해 먼저 해당 라이브러리를 설치해야 합니다. 다음과 같이 npm을 사용하여 Cropper.js를 설치할 수 있습니다.

npm install cropperjs

Cropper.js 초기화

Cropper.js를 사용하여 이미지에 스트로크 효과를 추가하기 위해 먼저 Cropper.js를 초기화해야 합니다. 다음과 같이 HTML과 JavaScript를 작성하여 Cropper.js를 초기화할 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.min.css" />
  </head>
  <body>
    <div>
      <img id="image" src="image.jpg" alt="image" />
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.min.js"></script>
    <script>
      const image = document.getElementById('image');
      const cropper = new Cropper(image, {
        // Cropper.js 옵션 설정
      });
    </script>
  </body>
</html>

위 코드에서 id가 “image”인 <img> 요소를 선택하여 Cropper 객체를 생성하고, Cropper.js의 옵션을 설정할 수 있습니다. 필요한 옵션을 설정하여 Cropper.js 객체를 초기화하면 이미지에 대한 편집 기능을 사용할 수 있습니다.

이미지에 스트로크 효과 추가하기

이미지에 스트로크 효과를 추가하는 방법은 Cropper.js 객체의 canvas 요소를 사용하는 것입니다. Cropper.js의 옵션 중 onCanvas 옵션을 사용하여 스트로크 효과를 추가할 수 있습니다. 예를 들어, 다음과 같이 onCanvas 옵션을 사용하여 이미지의 가장자리에 2픽셀의 빨간색 스트로크 효과를 추가할 수 있습니다.

const cropper = new Cropper(image, {
  // Cropper.js 옵션 설정
  onCanvas: function (canvas) {
    const context = canvas.getContext('2d');
    context.strokeStyle = 'red';
    context.lineWidth = 2;
    context.strokeRect(0, 0, canvas.width, canvas.height);
  },
});

위 코드에서 onCanvas 함수 내부에서 canvas 요소의 getContext('2d') 메서드를 사용하여 2D 캔버스 컨텍스트를 가져옵니다. 그리고 strokeStyle과 lineWidth 속성을 설정하여 스트로크 효과의 색상과 굵기를 지정한 후, strokeRect 메서드를 사용하여 네모 테두리를 그립니다.

참고 자료

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