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

29 Nov 2023

javascript

이번 글에서는 Cropper.js 라이브러리를 사용하여 이미지에 글리치(glitch) 효과를 추가하는 방법을 알아보겠습니다. 글리치 효과는 이미지를 일부러 일그러지게 만들어 디지털 미술이나 그래픽 디자인에 사용되는 효과입니다. Cropper.js는 이미지를 자르고 확대/축소/회전하기 위한 강력한 라이브러리이며, 많은 옵션과 이벤트를 제공하여 사용자가 이미지를 수정할 수 있는 기능을 제공합니다.

Cropper.js 설치하기

먼저, Cropper.js를 프로젝트에 설치해야 합니다. npm을 사용하는 경우 다음 명령어를 실행하여 Cropper.js를 설치할 수 있습니다.

npm install cropperjs

Cropper.js 초기화하기

이제, Cropper.js를 사용하여 이미지에 글리치 효과를 추가하기 위해 초기화 작업을 진행해야 합니다. 아래의 예제 코드를 참고하여 Cropper.js를 초기화할 수 있습니다.

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

  <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
  <script>
    var image = document.getElementById('image');
    var cropper = new Cropper(image, {
      aspectRatio: NaN,
      viewMode: 3,
      autoCropArea: 1,
      movable: false,
      zoomable: false,
      rotatable: false,
      scalable: false,
      cropBoxResizable: false,
      crop: function(event) {
        // 글리치 효과 추가 로직 구현
      }
    });
  </script>
</body>
</html>

위의 예제 코드에서는 Cropper.js를 <img> 요소에 적용하여 이미지를 자르고 효과를 추가할 수 있도록 설정하였습니다. aspectRatio를 NaN으로 설정하여 이미지의 비율을 자유롭게 조정할 수 있습니다. viewMode는 이미지를 확대/축소할 때 사용할 수 있는 모드를 지정하는데, 3은 자유로운 확대/축소를 의미합니다.

또한, autoCropArea를 1로 설정하여 이미지를 자동으로 자르기 위한 영역을 전체 이미지로 설정합니다. movable, zoomable, rotatable, scalable, cropBoxResizable 등의 옵션을 false로 설정하여 사용자가 이미지를 수정하는 기능을 제한할 수 있습니다.

글리치 효과 추가하기

Cropper.js의 crop 이벤트를 사용하여 이미지에 글리치 효과를 추가할 수 있습니다. crop 이벤트의 콜백 함수에서 이미지를 수정하는 로직을 구현하면 됩니다. 예를 들어, 아래의 예제 코드는 이미지에 랜덤한 글리치 효과를 추가하는 로직입니다.

crop: function(event) {
  var canvas = cropper.getCroppedCanvas();
  var ctx = canvas.getContext('2d');

  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var data = imageData.data;

  for (var i = 0; i < data.length; i += 4) {
    // 랜덤한 글리치 효과 로직 구현
    data[i] = Math.random() * 255; // 빨강 채널
    data[i + 1] = Math.random() * 255; // 초록 채널
    data[i + 2] = Math.random() * 255; // 파랑 채널
  }

  ctx.putImageData(imageData, 0, 0);
}

위의 코드에서는 getCroppedCanvas 메소드를 사용하여 자른 이미지를 Canvas 객체로 가져온 후, getImageData 함수로 해당 이미지 데이터를 가져옵니다. 가져온 이미지 데이터를 이용하여 랜덤한 글리치 효과를 추가한 후, putImageData 함수로 효과가 적용된 이미지 데이터를 다시 Canvas에 그립니다.

결론

Cropper.js를 사용하여 이미지에 글리치 효과를 추가하는 방법에 대해 알아보았습니다. Cropper.js는 강력한 이미지 편집 도구로서 다양한 라이브러리와의 통합이 가능하며, 다양한 이미지 효과를 구현할 수 있습니다. 이를 활용하여 더욱 독창적이고 창의적인 디지털 미술 작업이나 그래픽 디자인을 만들어보세요.

Cropper.js 설치하기

Cropper.js 초기화하기

글리치 효과 추가하기

결론

참고 자료