[javascript] Cropper.js를 사용하여 이미지에 차오르는 물결 효과 추가하기

29 Nov 2023

javascript

이미지에 흥미로운 효과를 추가하고 싶다면 Cropper.js를 사용해보세요. Cropper.js는 사용자가 이미지를 자르고 확대/축소할 수 있는 편리한 라이브러리입니다. 이번 튜토리얼에서는 Cropper.js를 사용하여 이미지에 차오르는 물결 효과를 추가하는 방법을 알아보겠습니다.

Cropper.js 설치하기

Cropper.js를 사용하기 위해 먼저 다음과 같이 Cropper.js를 설치해야 합니다.

npm install cropperjs --save

HTML과 CSS 설정하기

먼저 HTML 파일에 이미지를 표시할 영역을 만들어주고, Cropper.js의 스타일 시트와 스크립트를 로드해야 합니다. 다음과 같이 코드를 작성해주세요.

<html>
  <head>
    <link href="https://unpkg.com/cropperjs/dist/cropper.css" rel="stylesheet">
  </head>
  <body>
    <div>
      <img src="path/to/your/image.jpg" id="image" alt="Image">
    </div>

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

자바스크립트 설정하기

자바스크립트 파일을 생성하고, 다음과 같이 Cropper.js를 초기화하고 설정해줍니다.

// your-script.js

// 이미지를 참조하는 요소를 가져옵니다.
const image = document.getElementById('image');

// Cropper.js를 초기화합니다.
const cropper = new Cropper(image, {
  // 확대/축소 기능을 활성화합니다.
  zoomable: true,
  // 이미지 조정을 위한 편집 영역 크기를 설정합니다.
  viewMode: 3,
  // 차오르는 효과를 사용하기 위해 물결 효과 클래스를 추가합니다.
  cropBoxMovable: false,
  cropBoxResizable: false,
  crop: function(event) {
    // 자바스크립트로 원하는 효과를 추가합니다.
    // 여기에 이미지에 차오르는 물결 효과를 구현하는 코드를 작성합니다.
  }
});

위의 crop 함수를 사용하여 이미지에 차오르는 물결 효과를 추가할 수 있습니다. 이 함수는 이미지 크롭이 변경될 때마다 호출됩니다. 여기에서는 원하는 효과를 구현하는 코드를 작성하시면 됩니다.

효과 구현

차오르는 물결 효과를 구현하기 위해서는 자바스크립트로 이미지를 처리하는 방법을 알아야 합니다. 이미지를 가공하여 효과를 추가하거나, CSS를 사용하여 효과를 적용할 수 있습니다. 예를 들어, crop 함수를 사용하여 다음과 같이 이미지에 효과를 줄 수 있습니다.

crop: function(event) {
  const imageData = cropper.getImageData();
  const canvas = cropper.getCroppedCanvas();

  const ctx = canvas.getContext('2d');
  const width = canvas.width;
  const height = canvas.height;
 
  // 이미지에 물결 효과를 추가하는 코드를 작성합니다.
  for(let y = 0; y < height; y++) {
    for(let x = 0; x < width; x++) {
      const surfacePosition = ((x / width) * Math.PI * 2);
      const amplitude = 10;
      const offsetY = amplitude * Math.sin(surfacePosition);

      const sourceX = x;
      const sourceY = y + offsetY;
      const sourcePixel = ctx.getImageData(sourceX, sourceY, 1, 1).data;

      ctx.fillStyle = `rgba(${sourcePixel[0]}, ${sourcePixel[1]}, ${sourcePixel[2]}, ${sourcePixel[3]})`;
      ctx.fillRect(x, y, 1, 1);
    }
  }

  // 가공된 이미지를 적용합니다.
  cropper.setCanvasData(canvas);
  cropper.setCropBoxData({ left: 0, top: 0, width, height });
}

위의 예시 코드에서는 이미지의 픽셀 데이터를 가져와 물결 효과를 구현합니다. getImageData() 메서드로 이미지의 픽셀 데이터를 가져와서 가공한 뒤, setCanvasData() 메서드로 새로운 이미지를 적용합니다.

결론

이제 Cropper.js를 사용하여 이미지에 차오르는 물결 효과를 추가하는 방법을 알게 되었습니다. Cropper.js는 다양한 기능을 제공하므로, 자신만의 창조적인 효과를 구현해보세요. Cropper.js 공식 문서는 여기에서 확인할 수 있습니다.