QR코드 생성 플러그인 


QR코드를 생성할일이 있어 GitHub에 뒤적뒤적 거리다 간편하게 자바스크립트로 QR코드를 제작 할 수 있는 플러그인을 발견 하였습니다.


간편하게 Jquery, Javascript 몇줄으로 QR코드를 빠르고 간편하게 생성 할 수 있도록 작업되어있고, 많은분들이 사용하고 계셨습니다.


해당 플러그인을 제작하신분은 한국에 개발자이신것 같습니다.


qrcodejs(github)

https://github.com/davidshimjs/qrcodejs by davidshim 



qrcodejs 사용하기 


먼저 작업하고 계시는 프로젝트에 qrcode.js를 다운받아 소스에 포함시키면 됩니다.



해당 소스에 jquery는 필수로 포함되어있어야 하며, qrcode.js 혹은 qrcode.min.js 다운 받아서 포함시켜주시면 되겠습니다.




플러그인을 포함시킨뒤, 사용법을 살펴보겠습니다.


먼저 README.md 에 나와있는 내용 입니다.

간단하게 HTML div 개체를 id를 qrcode로 주고 스크립트 단에서 간단하게 설정해주면 끝이였습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<HTML>
<HEAD>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
</HEAD>
<BODY>
    <div id="qrcode"></div>
</BODY>
<script type="text/javascript">
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        text: "http://web-inf.tistory.com/",
        width: 128,
        height: 128,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
    });
</script>
</HTML>
 
cs

해당 샘플입니다.


1. head(헤더)에 jquery와 qrcode를 포함 

2. body(바디)에 qrcode div를 생성

3. script(스크립트)에 가이드대로 작성 


* 스크립트 옵션 설정

text 

width 

height 

colorDark 

colorLight 

correctLevel 

QR코드에 담을 text

QR코드 가로크기

QR코드 세로크기

QR코드 어두운색상

QR코드 밝은색상

정확도 (H,M,Q,H)



qrcodejs 사용완료


위와 같은 결과가 출력되며 사용이 완료됩니다.


추가사항으로, 생성한 QR코드를 혹시 다른 엘리먼트 안에 넣게되면 가운데정렬이 되지않고 왼쪽정렬로 기본이 잡히는 경우가 생깁니다.


이를 해결하는 샘플을 보여드리겠습니다.


*샘플 코드 입니다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<HTML>
<HEAD>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
</HEAD>
<BODY>
    <div style="border: 2px solid #000;width:500px"> 
        <div id="qrcode"></div>
    </div>
</BODY>
<script type="text/javascript">
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        text: "http://web-inf.tistory.com/",
        width: 128,
        height: 128,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
    });
</script>
</HTML>
cs


위 사진과 같이 div안에 QR코드를 넣었습니다. (왼쪽으로 치우쳐 졌습니다.)

해당경우 style을 통하거나 bootstrap의 text-center을 div에 적용하여도 정렬이 되지 않습니다.

스크립트 자체에서 canvas를 생성후 그안에 이미지를 넣는식이라 그렇게 동작을합니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<HTML>
<HEAD>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
</HEAD>
<BODY>
    <div style="border: 2px solid #000;width:500px"> 
        <div id="qrcode"></div>
    </div>
</BODY>
<script type="text/javascript">
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        text: "http://web-inf.tistory.com/",
        width: 128,
        height: 128,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
    });
 
    $("#qrcode > img").css({"margin":"auto"});
</script>
</HTML>
cs


해결 방법으로 스크립트 하단에 qrcode의 css margin값을 바꿔주면 위 사진처럼 해결이 됩니다.



샘플코드를 첨부하겠습니다. 


즐거운 하루되세요.


샘플코드

sample.zip 





반응형

'IT > JS' 카테고리의 다른 글

자바스크립트 ES6 let, const keyword  (0) 2021.05.17
MosaicFlow 모자익플로우 알아보기  (0) 2019.02.11
자바스크립트 ES6 '=>' 화살표 문법 (Arrow function)  (0) 2019.01.09
JavaScript 타임스탬프->날짜변환(Date) / 숫자형 3자리단위 콤마(,) 찍기  (0) 2018.12.20
CKEditor5 사용법 (게시판 편집툴)  (0) 2018.10.04

+ Recent posts

티스토리툴바