자바스크립트에서 QR코드를 그려보자.

 

이번에 qrcodejs라이브러리를 사용해서 그려보자.

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

 

※HTML 소스

<!DOCTYPE html>
<html lang="kr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QR code</title>
</head>
<body>
  <input id="text" type="text" value="https://krsw.tistory.com" style="width:80%" /><br />
  <div id="qrcode"></div>
  <script>
    const qrcode = new QRCode("qrcode");
    const elText = document.getElementById("text");
    elText.addEventListener("blur", (e)=> {
      makeCode();
    });
    elText.addEventListener("keydown", (e)=> {
      if (e.keyCode == 13) {
        makeCode();
      }
    });

    function makeCode () {    
      if (!elText.value) {
        alert("Input a text");
        elText.focus();
        return;
      }
      qrcode.makeCode(elText.value);
    }

    makeCode();
  </script>
</body>
</html>

※ 실행화면

728x90

+ Recent posts