투케이2K

469. (javaScript) 자바스크립트 qr-scanner 라이브러리 사용해 QR 이미지 (png , jpeg) 사진 디코딩 수행 실시 본문

JavaScript

469. (javaScript) 자바스크립트 qr-scanner 라이브러리 사용해 QR 이미지 (png , jpeg) 사진 디코딩 수행 실시

투케이2K 2025. 12. 15. 19:41
728x90

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : JavaScript

 

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / qr-scanner / QR / Image


- 사전) qr-scanner 라이브러리 간략 설명 : 

  >> qr-scanner 는 브라우저에서 QR 코드(이미지/캠코더 스트림)를 빠르고 간편하게 디코딩할 수 있게 해주는 경량 자바스크립트 라이브러리입니다
        
  >> qr-scanner 는 MIT 라이선스이며, Git 사이트는 https://github.com/nimiq/qr-scanner 입니다

  >> qr-scanner 핵심 특징 : 

    - 카메라/이미지 모두 지원 : 웹캠(연속 스캔)과 단일 이미지 파일, <img>, <canvas>, Blob/URL 등 다양한 소스에서 읽기 가능

    - 성능 최적화 : 가능하면 브라우저의 Barcode Detection API를 우선 사용(지원 시)하여 로딩 크기를 줄이고 성능을 끌어올림

    - 가벼움 : 최소화된 번들(약 59.3 kB, gzip 16.3 kB)이며, 네이티브 BarcodeDetector 사용 시 더 적게 로드

    - 브라우저 친화적 API : 카메라 목록, 선호 카메라 선택, 스캔 영역/속도 제한, 코드 외곽선 하이라이트, 플래시 제어 등 유틸리티 제공

  >> qr-scanner 내부 동작 (아키텍처) : 

    - 우선순위 : 지원 브라우저에서는 네이티브 BarcodeDetector로 QR을 감지/디코딩. 미지원일 경우 JavaScript 스캐너 엔진(jsQR 기반)을 사용

    - WebWorker 사용 : 디코딩 작업을 워커에서 수행하여 메인 스레드(렌더링/입력) 응답성을 유지

    - 모듈 구성 : qr-scanner.min.js (메인 API) + 필요 시 동적 임포트되는 qr-scanner-worker.min.js. 번들러를 쓰지 않으면 워커 파일을 같은 경로에 배치

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <title>javaScriptTest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">


    <!-- 내부 CSS 스타일 지정 -->
    <style>

        html, body {
            width: 100%;
            height: 100%;
            margin : 0 auto;
            padding : 0;
            border : none;
            background-color: #666;
        }

    </style>



    <!-- [자바스크립트 코드 지정] : Import 방식 사용 -->
    <script type="module">

        // --------------------------------------------------------------------------------------------------------------

        
        /*
        -----------------------------------------------------------
        import QrScanner from "https://unpkg.com/qr-scanner@1.4.2/qr-scanner.min.js"; 설명 정리
        -----------------------------------------------------------
        1. qr-scanner@1.4.2는 브라우저에서 QR 코드(이미지/캠코더 스트림)를 빠르고 간편하게 디코딩할 수 있게 해주는 경량 자바스크립트 라이브러리입니다
        -----------------------------------------------------------
        2. qr-scanner@1.4.2는 MIT 라이선스이며, Git 사이트는 https://github.com/nimiq/qr-scanner 입니다
        -----------------------------------------------------------
        */     

        import QrScanner from "https://unpkg.com/qr-scanner@1.4.2/qr-scanner.min.js";

        // --------------------------------------------------------------------------------------------------------------

        // [전역 변수 선언]
        var qrDecodeData = '';

        // --------------------------------------------------------------------------------------------------------------

        // [html 최초 로드 및 이벤트 상시 대기 실시]
        window.onload = async function() {
            console.log("[window onload] : [Start]");

            try {


                // -----------------------------------------
                // [fileInput 태그 객체 정의]
                // -----------------------------------------
                const input = document.getElementById('fileInput');


                // -----------------------------------------
                // [fileInput 태그 이벤트 변경 상태 리스너 정의]
                // -----------------------------------------              
                input.addEventListener('change', async (e) => {
                    
                    const file = e.target.files?.[0];

                    console.log("[QrScanner.scanImage] : [Start] : ", file);

                    if (!file) return;

                    try {
                        const text = await QrScanner.scanImage(file, { returnDetailedScanResult: true }); // ✅ QR 이미지 스캔 수행

                        /*
                        {
                            "data": "hello",
                            "cornerPoints": [
                                {
                                    "x": 5.564248130711721,
                                    "y": 7.627111603433959
                                },
                                {
                                    "x": 261.93750000000006,
                                    "y": 7.875000000000003
                                },
                                {
                                    "x": 260.71051190802086,
                                    "y": 262.39980837667673
                                },

                                {
                                    "x": 5.812499999999994,
                                    "y": 263.625
                                }
                            ]
                        }
                        */

                        console.warn("[QrScanner.scanImage] : [Data] : ", JSON.stringify(text)); // ✅ QR 복호화 전문 출력
                       
                        // Text Data Parsing
                        qrDecodeData = text.data;

                        console.log("[QrScanner.scanImage] : [Data] : ", qrDecodeData);
                    } 
                    catch (err) {
                        console.error("[QrScanner.scanImage] : [Exception] : 예외 상황 발생 : ", err);
                    }
                });

            }
            catch (exception) {
              console.error("[window onload] : [Exception] : 예외 상황 발생 : ", exception);
            }

        };

        // --------------------------------------------------------------------------------------------------------------

    </script>


</head>


<body>

    <!-- File Input Type -->
    <input type="file" accept="image/*" id="fileInput">

</body>

</html>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

[qr-scanner 라이브러리 Git 주소]

https://github.com/nimiq/qr-scanner


[qrcode 라이브러리 사용해 QR 코드 생성 실시]

https://blog.naver.com/kkh0977/222395438877?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------
 

[결과 출력]

​

 
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

471. (javaScript) 자바스크립트 qrcode.js 라이브러리 사용해 커스텀 옵션 지정 간단 QR 코드 생성 수행  (0) 2025.12.16
470. (javaScript) 자바스크립트 zxing browser 라이브러리 사용해 video 태그 사용 실시간 QR 이미지 (png , jpeg) 스캔 수행 실시  (0) 2025.12.15
468. (javaScript) [간단 소스] 자바스크립트 scrollIntoView 사용해 특정 태그 위치로 스크롤 이동 수행  (0) 2025.12.12
467. (javaScript) [간단 소스] 자바스크립트 Body Scroll 바디 스크롤 막기 및 스크롤 재적용 코드 - lockBodyScroll  (0) 2025.12.12
466. (javaScript) 자바스크립트 AWS Iot Core 원격 작업 펌웨어 업데이트 JobDocument 문서 정보 조회  (0) 2025.12.10
'JavaScript' Related Articles more
Comments