쉽게 사용하는 qrcode.js 튜토리얼

쉽게 사용하는 qrcode.js 튜토리얼

 

1.qrcode.js란?

원하는 데이터를 qr코드로 만들어 주는 라이브러리(api)이다

정보, 사이트, 이미지 다양한 정보를 qr코드로 만들수 있다.

전자출입명부, 로또 당첨, 이벤트 페이지 연결 등에 주로 사용되고 있다.

 

 

2. 적용방법

 

2-1 qrcode.js 다운로드

①깃허브에서 직접 받는다

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

qrcode.js

②ZIP파일 다운로드

qrcodejs-master.zip

0.05MB

 

 

2-2 다운받은 파일을 연결 

<script type="text/javascript" src="qrcode.js"></script>

</head> 앞에 넣어주세요

 

 

3.사용방법

<input id="text" type="text" value="" style="width:100%"> 
//qr코드를 보여주는 div 
<div id="qrcode" style="width:100px; height:100px; margin:auto; margin-top:15px;"></div>

<script>
//qr코드 생성 
var qrcode = new QRCode(document.getElementById("qrcode"), { 
//가로, 세로 높이 조절 
width : 100, 
height : 100 }); 

//input:text에 들어있는 value를 qr코드로 바꿔주는 function 
function makeCode () { 
	var elText = document.getElementById("text"); 
    if (!elText.value) { 
    	alert("Input a text"); 
        elText.focus(); return; 
    } 
    qrcode.makeCode(elText.value); 
} 

//위에 만든 function 실행 
makeCode(); 

//텍스트 이벤트 감지 
$("#text")
	.on("blur", function () { 
	makeCode(); })
    .on("keydown", function (e) { 
    	if (e.keyCode == 13) { 
        makeCode();} 
    });
</script>

위의 코드를 사용하면 input에 입력하는것 만으로도 qr코드를 만들수 있다. 

 

 

4.마치며

qr코드는 사용하기에 따라 활용도가 달라집니다.

결제 모듈에도 붙일 수 있고 랜딩페이지(이벤트 페이지) 접근에도 붙일수 있습니다.

 

위의 코드는 qrcode.js와 제이쿼리를 사용하여 만들었습니다.