투케이2K

180. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 qrcode.js 라이브러리 사용해 옵션 지정 QR Code 큐알 코드 생성 수행 본문

투케이2K 유틸파일

180. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 qrcode.js 라이브러리 사용해 옵션 지정 QR Code 큐알 코드 생성 수행

투케이2K 2026. 1. 4. 17:40
728x90

[설 명]

​

프로그램 : Web / JavaScript

​

설 명 : [Web/JavaScript] 자바스크립트 qrcode.js 라이브러리 사용해 옵션 지정 QR Code 큐알 코드 생성 수행

​

 

[소스 코드]

​

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

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / qrcode.js / QR


- 사전) qrcode.js 라이브러리 간략 설명 : 

  >> qrcode.js 는 QRCode.js라는 경량 자바스크립트 라이브러리를 CDN을 통해 불러오는 방식입니다

  >> qrcode.js 는 브라우저에서 QR 코드 생성을 매우 간단하게 해줍니다

  >> qrcode.js 는 브라우저 IE8 이상 대부분 지원합니다

  >> qrcode.js 는 MIT (상업적 사용 가능) 라이센스 이며, 크기가 매우 작고 가볍습니다

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





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

<!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>





    <!-- [CDN 주소 설정] -->    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>






    <!-- [자바스크립트 코드 지정] -->
    <script>

        
        /*
        -----------------------------------------------------------
        https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js 설명 정리
        -----------------------------------------------------------
        1. qrcode 는 QRCode.js라는 경량 자바스크립트 라이브러리를 CDN을 통해 불러오는 방식입니다
        -----------------------------------------------------------
        2. qrcode 는 브라우저에서 QR 코드 생성을 매우 간단하게 해줍니다
        -----------------------------------------------------------
        3. qrcode 는 브라우저 IE8 이상 대부분 지원합니다
        -----------------------------------------------------------
        4. qrcode 는 MIT (상업적 사용 가능) 라이센스 이며, 크기가 매우 작고 가볍습니다
        -----------------------------------------------------------
        */ 


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

            try {


                // -----------------------------------------
                // [div 태그 객체 정의 및 QR 생성 데이터 지정]
                // -----------------------------------------
                const qrcode = document.getElementById('qrcode');

                const qrdata = "helloTwok2k";



                // -----------------------------------------
                // [new QRCode : 기본 QR 생성 방법]
                // -----------------------------------------
                //new QRCode(qrcode, qrdata);


                // -----------------------------------------
                // ✅ [new QRCode : 옵션 지정 QR 생성 방법]
                // -----------------------------------------                
                const qr = new QRCode(qrcode, {
                    text: qrdata, // QR 코드에 인코딩할 데이터 문자열
                    width: 256, // 브라우저에서 렌더링할 이미지의 픽셀 크기입니다. (Canvas/DOM 크기)
                    height: 256, // 브라우저에서 렌더링할 이미지의 픽셀 크기입니다. (Canvas/DOM 크기)
                    colorDark: "#000000", // QR의 어두운 모듈(검은 점) 색상(HEX/RGB)입니다
                    colorLight: "#ffffff", // QR의 밝은 배경 색상입니다
                    correctLevel: QRCode.CorrectLevel.H  // 에러 정정(Error Correction) 레벨입니다 (L = 약 7% 복원 (용량↑, 스캔 여건 좋을 때 적합) / M = 약 15% 복원 (일반적인 웹/인쇄에 널리 사용) / Q = 약 25% 복원 (사람 손길/오염 가능성 높은 환경) / H = 약 30% 복원 (로고를 중앙에 얹거나 손상 가능성이 큰 인쇄물에 적합))
                });


                const connectTimer = setTimeout(() => {
                    console.error("[setTimeout] : Qr Update");

                    try {
                        if (qr != null && qr != undefined){
                            qr.makeCode("twok"); // ✅ QR 코드 재설정
                        }
                    }
                    catch (exception) {
                        console.error("[setTimeout] : Exception : ", exception);                        
                    }                    

                }, 10000 ); // ✅ 10 초 뒤 동작

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

        };

    </script>


</head>


<body>

    <!-- Qr Container -->
    <div id="qrcode"></div>

</body>

</html>

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





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

[qrcodejs 라이브러리 사용 참고 사이트]

https://davidshimjs.github.io/qrcodejs/


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

https://kkh0977.tistory.com/859

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


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

https://kkh0977.tistory.com/8500

https://blog.naver.com/kkh0977/224110780992


[자바스크립트 zxing browser 라이브러리 사용해 video 태그 사용 실시간 QR 이미지 (png , jpeg) 스캔 수행 실시]

https://kkh0977.tistory.com/8501

https://blog.naver.com/kkh0977/224110786770

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

'투케이2K 유틸파일' 카테고리의 다른 글

179. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 zxing browser , library 라이브러리 사용해 QR 및 Barcode 이미지 스캔 수행  (0) 2025.12.27
178. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 AWS STS 사용 Long 형식 S3 파일 다운 GetPreSignedUrl 프리사인 URL 주소 생성  (0) 2025.12.26
177. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 파일 다운로드 Get URL 주소에서 커스텀 파라미터 추가해 Long Url 생성 유틸 파일  (0) 2025.12.21
176. (TWOK/UTIL) [Web/JavaScript] paho-mqtt 라이브러리 사용해 AWS IOT Core 플릿 프로비저닝 Thing 사물 등록 수행  (0) 2025.12.14
175. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 mqtt.min.js 사용해 AWS MQTT5 사용자속성 userProperties 메시지 전송 및 구독  (0) 2025.11.29
'투케이2K 유틸파일' Related Articles more
Comments