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

29 Nov 2023

javascript

이미지에 연기 효과를 추가하면 시각적으로 흥미로운 이미지를 만들 수 있습니다. 이제 Cropper.js 라이브러리를 사용하여 이미지에 연기 효과를 추가하는 방법에 대해 알아보겠습니다.

Cropper.js란?

Cropper.js는 클라이언트 측에서 이미지 자르기 및 크롭 기능을 제공하는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 이미지를 자를 수 있으며, 그 중 일부 부분만 보이도록 크롭할 수 있습니다.

설정하기

먼저, Cropper.js를 다운로드하여 프로젝트에 추가합니다. 다음으로 HTML 파일에 이미지를 추가하고 해당 이미지에 Cropper.js를 적용할 준비를 합니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>이미지에 연기 효과 추가하기</title>
  <link rel="stylesheet" href="cropper.css">
</head>
<body>
  <img id="image" src="example.jpg">
  <script src="cropper.js"></script>
  <script src="app.js"></script>
</body>
</html>

Cropper.js 적용하기

이제 JavaScript 파일인 app.js를 생성하여 Cropper.js를 적용합니다.

window.addEventListener('DOMContentLoaded', (event) => {
  const image = document.getElementById('image');
  const cropper = new Cropper(image, {
    aspectRatio: 16 / 9,
    viewMode: 1,
    movable: false,
    zoomable: false,
    rotatable: false,
    scalable: false,
    crop: function(e) {
      // 이미지에 연기 효과 적용
      // e.detail.x, e.detail.y, e.detail.width, e.detail.height 등의 값을 사용하여 이미지를 조작합니다.
    }
  });
});

위 코드에서 crop 이벤트 핸들러 함수 안에서 이미지에 연기 효과를 적용할 수 있습니다. 해당 함수 내에서 e.detail.x, e.detail.y, e.detail.width, e.detail.height 등의 값을 사용하여 이미지를 조작하면 됩니다.

참고 자료

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

이제 Cropper.js를 사용하여 이미지에 연기 효과를 추가하는 방법을 알게 되었습니다. 이를 활용하여 다양하고 흥미로운 이미지를 만들어보세요!