이미지 OCR(Optical Character Recognition)은 이미지 안에 포함된 텍스트를 인식해서 컴퓨터가 이해할 수 있는 텍스트로 변환하는 기술입니다. 이번에는 PhotoSwipe 라이브러리를 사용하여 이미지 OCR을 구현해보겠습니다.

PhotoSwipe 소개

PhotoSwipe는 모바일 및 데스크톱에서 사용할 수 있는 JavaScript 라이브러리로, 이미지, 동영상 및 HTML 콘텐츠에 사용할 수 있는 일련의 이미지뷰어입니다. 이 라이브러리를 사용하면 사용자들은 이미지를 확대, 축소하고 슬라이딩해서 다음 이미지로 이동할 수 있습니다.

PhotoSwipe를 사용하기 위해서는 먼저 해당 라이브러리를 다운로드하거나 CDN에 있는 링크를 추가해야 합니다. 또한 이미지를 포함하는 HTML 마크업을 구성해야 합니다.

Tesseract.js를 사용하여 이미지 OCR 인식하기

Tesseract.js는 자바스크립트용 OCR 라이브러리로, Tesseract OCR 엔진을 웹 브라우저나 Node.js에서 사용할 수 있도록 합니다. Tesseract.js를 사용하여 이미지 OCR을 구현할 수 있습니다.

PhotoSwipe에서 선택한 이미지를 Tesseract.js에 전달하여 이미지 OCR을 수행해보겠습니다. 먼저 Tesseract.js 라이브러리를 추가합니다.

<script src="https://cdn.jsdelivr.net/npm/tesseract.js@2.1.1/dist/tesseract.js"></script>

다음으로 PhotoSwipe에서 이미지 선택시 호출되는 이벤트 핸들러를 작성합니다.

var pswpElement = document.querySelectorAll('.pswp')[0];
var options = {
    // PhotoSwipe 옵션 설정
    // ...
    getThumbBoundsFn: function(index) {
        // 썸네일 경계값을 반환하는 함수
        // ...
    },
    getImageURLForShare: function(idx, item) {
        // 공유하기를 위한 이미지 URL을 반환하는 함수
        // ...
    },
    shareButtons: [
        // 공유하기 버튼 목록
        // ...
    ],
    // ...
    tapToToggleControls: false,
    onTap: function(e) {
        // 이미지를 탭했을 때 호출되는 이벤트 핸들러
        // 이미지 OCR 인식 수행하기
        var img = e.target;
        
        Tesseract.recognize(img)
            .then(function(result) {
                // OCR 결과 처리하기
                var text = result.text;
                
                // OCR 결과를 표시할 곳에 텍스트 삽입하기
                document.querySelector('#ocr-result').textContent = text;
            });
    }
};

var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);

위 코드는 PhotoSwipe의 onTap 이벤트 핸들러 내에서 이미지 OCR 인식을 수행하고 결과를 #ocr-result 요소에 표시합니다. OCR 결과를 다른 곳에 표시하려면 적절히 수정하면 됩니다.

결론

PhotoSwipe와 Tesseract.js를 연동하여 이미지 OCR 인식하기 위한 방법을 알아보았습니다. 이를 통해 사용자가 PhotoSwipe에서 이미지를 선택할 때 자동으로 OCR 인식을 수행하고 결과를 표시할 수 있습니다. 이러한 방법을 사용하면 글자를 포함한 이미지에서 텍스트를 추출하여 다양한 용도로 활용할 수 있습니다.