[javascript] Cropper.js를 사용하여 이미지에 모션 블러 효과 추가하기

29 Nov 2023

javascript

이번 블로그 포스트에서는 JavaScript 이미지 크롭 라이브러리인 Cropper.js를 사용하여 이미지에 모션 블러 효과를 추가하는 방법에 대해 알아보겠습니다.

Cropper.js 소개

Cropper.js는 사용자가 웹 페이지에서 이미지를 자를 수 있는 기능을 제공하는 JavaScript 라이브러리입니다. 이미지를 드래그하고, 확대/축소하며, 잘라내기 등의 기능을 제공합니다. Cropper.js는 쉽고 간편하며, 다양한 커스터마이징 옵션을 제공하여 웹 개발자들에게 많은 유연성을 제공합니다.

모션 블러 효과 추가하기

이미지에 모션 블러 효과를 추가하기 위해서는 Cropper.js를 사용하여 자르고 확대/축소된 이미지를 생성해야 합니다. 이후 생성된 이미지에 CSS 필터 속성을 사용하여 모션 블러 효과를 적용합니다. 아래는 이 과정을 단계별로 설명한 코드 예제입니다.

HTML 파일에 Cropper.js를 로드합니다.
```
<script src="cropper.js"></script>
```
이미지를 자를 영역을 만들기 위해 <div> 요소를 추가합니다. ```html

3. JavaScript 코드를 사용하여 Cropper.js 객체를 생성하고 이미지를 자릅니다.
```javascript
const image = document.getElementById('image')
const cropper = new Cropper(image, {
  aspectRatio: 1,
  viewMode: 1,
  zoomable: false,
  crop(event) {
    // 잘린 이미지를 생성하고 화면에 표시합니다.
    const croppedCanvas = cropper.getCroppedCanvas()
    const croppedImage = document.createElement('img')
    croppedImage.src = croppedCanvas.toDataURL()
    document.getElementById('imageContainer').appendChild(croppedImage)
  }
})

생성된 이미지에 CSS 필터 속성을 사용하여 모션 블러 효과를 적용합니다.
```
#imageContainer img {
  filter: blur(5px);
}
```

위의 코드 예제를 따라하면 이미지를 자르고 원하는 영역에 모션 블러 효과를 적용할 수 있습니다.

마무리

이번에는 JavaScript 이미지 크롭 라이브러리인 Cropper.js를 사용하여 이미지에 모션 블러 효과를 추가하는 방법에 대해 알아보았습니다. Cropper.js는 쉽게 사용할 수 있고 많은 커스터마이징 옵션을 제공하므로 웹 개발자들에게 큰 도움이 될 것입니다. 추가적인 자세한 정보는 Cropper.js 공식 문서를 참조하시기 바랍니다.

Cropper.js: https://fengyuanchen.github.io/cropperjs/

참조:

Cropper.js 공식 문서: https://fengyuanchen.github.io/cropperjs/
CSS 필터 속성: https://developer.mozilla.org/ko/docs/Web/CSS/filter