[javascript] Cropper.js를 사용하여 이미지와 관련된 데이터 추출하기

29 Nov 2023

javascript

이미지 편집 및 자르기 기능을 구현하기 위해 Cropper.js를 사용할 수 있습니다. Cropper.js는 HTML 이미지 요소를 설정하고 사용자가 선택한 영역에 대한 정보를 추출하는 데 도움이 되는 라이브러리입니다. 이 문서에서는 Cropper.js를 사용하여 이미지와 관련된 데이터를 추출하는 방법에 대해 알아보겠습니다.

Cropper.js 설치 및 설정

Cropper.js를 사용하기 위해서는 먼저 해당 라이브러리를 다운로드하고 HTML 파일에 추가해야 합니다. Cropper.js는 cropper.min.js 파일과 cropper.min.css 파일로 구성되어 있습니다. 아래는 CDN을 통해 Cropper.js 라이브러리를 추가하는 예시입니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.min.js"></script>

Cropper.js를 사용하기 위해 아래와 같이 HTML 파일의 이미지 요소에 ID를 부여합니다.

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

Cropper.js 적용하기

다음으로, Cropper.js를 적용하여 이미지 요소를 설정하고 사용자가 선택한 영역에 대한 정보를 추출할 수 있습니다. 아래는 Cropper.js의 기본적인 사용 예시입니다.

// 이미지 요소 설정
var image = document.getElementById('image');
// Cropper.js 인스턴스 생성
var cropper = new Cropper(image, {
    aspectRatio: 16 / 9, // 종횡비 설정 (선택 사항)
    crop: function(event) {
        // 사용자가 선택한 영역에 대한 정보 출력
        console.log(event.detail.x);
        console.log(event.detail.y);
        console.log(event.detail.width);
        console.log(event.detail.height);
    }
});

위 예시에서는 이미지 요소에 image ID를 부여하고, Cropper.js 인스턴스를 생성하였습니다. aspectRatio를 설정하여 선택 영역의 종횡비를 정할 수 있으며, crop 이벤트를 이용하여 사용자가 선택한 영역에 대한 정보를 추출하고 출력합니다.

데이터 추출하기

Cropper.js를 통해 이미지와 관련된 데이터를 추출하기 위해서는 다양한 메소드와 이벤트를 사용할 수 있습니다. 아래는 Cropper.js에서 제공하는 기능 중 일부입니다.

getCroppedCanvas

getCroppedCanvas 메소드를 사용하면 사용자가 선택한 영역을 기반으로 자른 이미지를 생성할 수 있습니다. 아래는 getCroppedCanvas 메소드를 사용하는 예시입니다.

// Cropper.js 인스턴스 생성 및 설정
var cropper = new Cropper(image, {
    //...
});

// 사용자가 선택한 영역을 기반으로 자른 이미지 추출
var croppedCanvas = cropper.getCroppedCanvas();

// 추출한 이미지를 사용하여 작업 수행
// 예: 이미지 다운로드
croppedCanvas.toBlob(function(blob) {
    var url = URL.createObjectURL(blob);
    var link = document.createElement('a');
    link.href = url;
    link.download = 'cropped-image.jpg';
    link.click();
    URL.revokeObjectURL(url);
});

위 예시에서는 getCroppedCanvas 메소드를 사용하여 사용자가 선택한 영역을 기반으로 자른 이미지를 추출하고, 추출한 이미지를 사용하여 다양한 작업을 수행합니다. 여기서는 이미지를 다운로드하는 예시를 보여주었습니다.

getData

getData 메소드를 사용하면 사용자가 선택한 영역에 대한 정보를 객체 형태로 추출할 수 있습니다. 아래는 getData 메소드를 사용하는 예시입니다.

// Cropper.js 인스턴스 생성 및 설정
var cropper = new Cropper(image, {
    //...
});

// 사용자가 선택한 영역에 대한 정보 추출
var data = cropper.getData();

console.log(data.x); // 선택 영역의 x 좌표
console.log(data.y); // 선택 영역의 y 좌표
console.log(data.width); // 선택 영역의 너비
console.log(data.height); // 선택 영역의 높이

위 예시에서는 getData 메소드를 사용하여 사용자가 선택한 영역의 좌표와 크기를 객체 형태로 추출하고 출력합니다.

결론

Cropper.js를 사용하면 이미지와 관련된 데이터를 쉽게 추출할 수 있습니다. 사용자가 선택한 영역에 대한 정보를 추출하여 이미지 편집, 자르기 등 다양한 작업을 수행할 수 있습니다. Cropper.js 공식 문서에서 더 많은 기능과 설정을 확인하고 활용해보세요.

참고 자료

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