본문 바로가기

명사 美 비격식 (무리 중에서) 아주 뛰어난[눈에 띄는] 사람[것]

Personal/Tip

QR CODE 만들기 qrcode.js

qrcode.js를 이용해 띄우기

더보기

우선 보기좋게하기위해 최소한의 css를 지정한다.

  <style>
    body * {margin: auto;text-align: center;}
    input {display: block;width:200px;}
    #qrcode{width:200px; height:200px; margin-top:15px;}
  </style>

 

값이 들어갈 input, qr이 만들어질 div를 만든다.

  <input id="text" type="text" value="https://google.com"/>
  <div id="qrcode"></div>

 

jquery연결 후, qrcode.js연결

  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="crossorigin="anonymous"></script>
  <script src='https://cdn.jsdelivr.net/gh/baroninn/qrcodejs@master/qrcode.js'></script>

 

스크립트 추가. 끝.

  <script>
    var qrcode = new QRCode(document.getElementById("qrcode"), {
      width: 200,
      height: 200
    });
    function makeCode() {
      var elText = document.getElementById("text");

      if (!elText.value) {
        //alert("Input a text");
        elText.focus();
        return;
      }
      qrcode.makeCode(elText.value);
    }
    makeCode();
    $("#text").
      on("blur", function () {
        makeCode();
      }).
      on("keydown", function (e) {
        if (e.keyCode == 13) {
          makeCode();
        }
      });
  </script>

 

 

아래와 같은 결과물을 볼 수 있다.

 

 

license.txt
0.00MB