투케이2K

471. (javaScript) 자바스크립트 qrcode.js 라이브러리 사용해 커스텀 옵션 지정 간단 QR 코드 생성 수행 본문

JavaScript

471. (javaScript) 자바스크립트 qrcode.js 라이브러리 사용해 커스텀 옵션 지정 간단 QR 코드 생성 수행

투케이2K 2025. 12. 16. 19:18
728x90

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : JavaScript

 

[소스 코드]

​

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

- 개발 환경 : 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
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

473. (javaScript) 자바스크립트 파일 다운로드 Get URL 주소에서 커스텀 파라미터 추가해 Long Url 생성 및 a 태그 파일 다운로드 수행  (0) 2025.12.19
472. (javaScript) 자바스크립트 AWS STS 임시 자격 증명 사용 및 Long 형식 S3 파일 다운로드 GetPreSignedUrl 프리 사인 URL 주소 생성  (0) 2025.12.17
470. (javaScript) 자바스크립트 zxing browser 라이브러리 사용해 video 태그 사용 실시간 QR 이미지 (png , jpeg) 스캔 수행 실시  (0) 2025.12.15
469. (javaScript) 자바스크립트 qr-scanner 라이브러리 사용해 QR 이미지 (png , jpeg) 사진 디코딩 수행 실시  (0) 2025.12.15
468. (javaScript) [간단 소스] 자바스크립트 scrollIntoView 사용해 특정 태그 위치로 스크롤 이동 수행  (0) 2025.12.12
'JavaScript' Related Articles more
Comments