이미지에 캔버스 효과를 추가하려면 Cropper.js 라이브러리를 사용할 수 있습니다. Cropper.js는 이미지를 자르고 회전시키고 크기를 조정하는 기능을 제공하는 강력한 도구입니다.

Cropper.js 라이브러리 추가

먼저, HTML 페이지에 Cropper.js 라이브러리를 추가해야 합니다. 다음과 같이 <script> 태그를 사용하여 라이브러리를 로드할 수 있습니다.

<script src="https://unpkg.com/cropperjs/dist/cropper.min.js"></script>

이미지 요소 추가

이미지에 캔버스 효과를 추가하려면 <img> 요소를 추가해야 합니다. 이미지가 표시될 위치에 다음과 같이 <img> 태그를 추가합니다.

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

스크립트 추가

이제 스크립트 태그를 사용하여 Cropper.js를 초기화하고 이미지에 캔버스 효과를 적용할 수 있습니다. 다음은 기본 설정으로 Cropper.js를 초기화하는 예제입니다.

<script>
  const image = document.getElementById('targetImage');
  const cropper = new Cropper(image, {
    movable: true,
    zoomable: true,
    rotatable: true
  });
</script>

위 예제에서 targetImage는 이미지 요소의 ID를 나타내며, movable, zoomable, rotatable 등의 속성은 Cropper.js에서 제공하는 옵션입니다. 이를 조정하여 원하는 캔버스 효과를 설정할 수 있습니다.

캔버스 효과 적용

Cropper.js 초기화 이후, 사용자는 이미지를 자르고 회전시키고 크기를 조정할 수 있습니다. Cropper.js에서 제공하는 메소드를 사용하여 이를 구현할 수 있습니다. 예를 들어, 이미지를 자르고자 한다면 cropper.crop() 메소드를 사용할 수 있습니다.

<script>
  // 이미지 자르기
  const cropButton = document.getElementById('cropButton');
  cropButton.addEventListener('click', () => {
    const croppedImage = cropper.getCroppedCanvas();
    // 캔버스에 자른 이미지 표시
    document.body.appendChild(croppedImage);
  });
</script>

위의 예제에서 cropButton은 사용자가 클릭할 버튼을 나타냅니다. 버튼을 클릭하면 getCroppedCanvas() 메소드를 사용하여 자른 이미지를 가져올 수 있습니다. 그리고 캔버스에 자른 이미지를 표시하는 예제 코드를 보여줍니다.

이제 Cropper.js를 사용하여 이미지에 캔버스 효과를 적용하는 방법을 알게 되었습니다. 이 라이브러리를 사용하여 다양한 화면 효과를 구현할 수 있으며, 자세한 정보는 Cropper.js 공식 문서를 참조하시기 바랍니다.