이미지에 더러운 효과를 추가하여 흥미로운 시각적 효과를 만들 수 있습니다. 이를 위해 Cropper.js라는 JavaScript 라이브러리를 사용할 수 있습니다. Cropper.js는 이미지를 자르고 회전시키고 확대/축소할 수 있는 강력한 기능을 제공합니다.

Cropper.js 라이브러리 가져오기

우선 Cropper.js 라이브러리를 다운로드하고 HTML 페이지에 추가해야 합니다. 다음과 같이 script 태그를 사용하여 Cropper.js 파일을 가져올 수 있습니다.

<script src="cropper.js"></script>

이미지 Cropper 만들기

이제 이미지에 Cropper를 생성해야 합니다. Cropper.js는 img 요소를 원본 이미지로 사용하므로 다음과 같이 img 태그를 페이지에 추가해야 합니다.

<img id="image" src="image.jpg">

Cropper 인스턴스 만들기

Cropper.js는 JavaScript로 Cropper 인스턴스를 만들 수 있도록 해줍니다. 이를 위해 다음 예제 코드와 같이 new Cropper()를 사용해 인스턴스를 만들어야 합니다.

var image = document.getElementById('image');
var cropper = new Cropper(image, {
  aspectRatio: 16 / 9,
  crop: function(event) {
    // 자르기가 완료되었을 때 호출되는 콜백 함수입니다.
    // 여기서 필요한 작업을 수행할 수 있습니다.
  }
});

더러운 효과 추가하기

이제 Cropper를 통해 이미지를 자르고 회전시키고 확대/축소할 수 있습니다. 이를 통해 이미지에 더러운 효과를 추가할 수 있습니다. 예를 들어, 다음과 같이 crop 이벤트 리스너를 추가하여 자르기가 완료되었을 때마다 이미지에 더러운 효과를 적용할 수 있습니다.

var image = document.getElementById('image');
var cropper = new Cropper(image, {
  aspectRatio: 16 / 9,
  crop: function(event) {
    var canvas = cropper.getCroppedCanvas();
    var context = canvas.getContext('2d');
    
    // 이미지에 더러운 효과를 적용하는 코드를 작성합니다.
    // 예를 들어, context.filter = 'blur(5px)'와 같이 사용할 수 있습니다.
  }
});

결론

Cropper.js를 사용하면 이미지에 재미있는 더러운 효과를 추가할 수 있습니다. 위에서 설명한 방법을 따라서 Cropper.js를 사용하여 이미지를 자르고 회전시키고 확대/축소하고 더러운 효과를 적용할 수 있습니다. 이를 통해 웹 페이지에 시각적 효과를 더할 수 있고 사용자에게 흥미로운 경험을 제공할 수 있습니다.

참고 문서:

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