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

29 Nov 2023

javascript

이미지 편집을 위한 JavaScript 라이브러리인 Cropper.js는 다양한 기능을 제공하여 사용자가 이미지에 다양한 효과를 추가할 수 있도록 도와줍니다. 이번 튜토리얼에서는 Cropper.js를 사용하여 이미지에 입체 효과를 추가하는 방법을 알아보겠습니다.

Cropper.js란?

Cropper.js는 사용자가 웹 애플리케이션에서 이미지를 자르고 편집할 수 있도록 도와주는 클라이언트 사이드 이미지 편집 라이브러리입니다. 손쉽게 이미지를 자를 수 있으며, 확대/축소, 회전, 반전 등의 기능을 제공합니다. 또한, 드래그 앤 드롭을 통해 이미지를 이동시킬 수도 있습니다.

Cropper.js 설치하기

Cropper.js를 사용하기 위해서는 먼저 해당 라이브러리를 설치해야 합니다. npm을 사용하는 경우 아래의 명령어를 통해 설치할 수 있습니다.

npm install cropperjs

또는 CDN을 사용할 수도 있습니다.

<script src="https://cdn.jsdelivr.net/npm/cropperjs/dist/cropper.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cropperjs/dist/cropper.min.css">

Cropper.js를 사용하여 이미지에 입체 효과 추가하기

Cropper.js를 사용하여 이미지에 입체 효과를 추가하려면 다음 단계를 따라야 합니다.

HTML 파일에 이미지 태그와 편집 도구를 위한 컨테이너를 추가합니다.
JavaScript 파일에 Cropper.js 객체를 생성하고 이미지와 컨테이너를 연결합니다.
필요한 편집 도구를 추가하고 해당 도구를 사용하여 이미지를 편집합니다.
수정된 이미지 데이터를 저장하거나 다른 작업에 활용합니다.

<!DOCTYPE html>
<html>
<head>
    <title>Cropper.js를 사용하여 이미지에 입체 효과 추가하기</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cropperjs/dist/cropper.min.css">
</head>
<body>
    <div>
        <h1>이미지 편집</h1>
        <img src="image.jpg" id="image" alt="이미지" width="300" height="200">
        <hr>
        <button id="cropButton">자르기</button>
        <button id="zoomInButton">확대</button>
        <button id="zoomOutButton">축소</button>
        <button id="rotateLeftButton">왼쪽으로 회전</button>
        <button id="rotateRightButton">오른쪽으로 회전</button>
        <button id="resetButton">초기화</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/cropperjs/dist/cropper.min.js"></script>
    <script>
        // 이미지와 컨테이너를 연결하여 Cropper.js 객체 생성
        const image = document.getElementById('image');
        const cropper = new Cropper(image, {
            aspectRatio: 16 / 9,
            crop(event) {
                console.log(event.detail.x);
                console.log(event.detail.y);
                console.log(event.detail.width);
                console.log(event.detail.height);
                console.log(event.detail.rotate);
                console.log(event.detail.scaleX);
                console.log(event.detail.scaleY);
            }
        });

        // 편집 도구를 추가하고 사용하여 이미지 편집
        document.getElementById('cropButton').addEventListener('click', () => {
            const croppedCanvas = cropper.getCroppedCanvas();
            const editedImageData = croppedCanvas.toDataURL('image/jpeg');
            // 수정된 이미지 데이터를 저장하거나 다른 작업에 활용
        });

        document.getElementById('zoomInButton').addEventListener('click', () => {
            cropper.zoom(0.1);
        });

        document.getElementById('zoomOutButton').addEventListener('click', () => {
            cropper.zoom(-0.1);
        });

        document.getElementById('rotateLeftButton').addEventListener('click', () => {
            cropper.rotate(-45);
        });

        document.getElementById('rotateRightButton').addEventListener('click', () => {
            cropper.rotate(45);
        });

        document.getElementById('resetButton').addEventListener('click', () => {
            cropper.reset();
        });
    </script>
</body>
</html>

위의 코드 예제에서는 이미지를 자르고 확대/축소, 회전 등의 편집 도구를 사용할 수 있습니다. crop 이벤트를 통해 이미지의 편집 정보를 확인할 수도 있습니다.

Cropper.js는 다양한 기능을 제공하므로 더 자세한 사용법은 공식 문서를 참조하십시오.

결론

Cropper.js를 사용하면 웹 애플리케이션에서 이미지에 다양한 효과를 추가할 수 있습니다. 자유롭게 이미지를 편집하고 저장하거나 다른 작업에 활용할 수 있습니다.

참고 자료:

주의: Cropper.js는 라이브러리의 라이선스를 정확히 이해하고 사용해야 합니다.