Generate QRCode ด้วย Javascript

สวัสดีครับ ในบทความนี้ผมจะแนะนำวิธีการ แปลง Text เป็น QR Code ในไม่กี่ขั้นตอนโดยไม่ต้องยุ่งยากกับ Code อะไรเลย ขั้นตอนมีดังนี้ครับ

1. Download Code จาก Github QRCodeJS ที่นี่
2. แตกไฟล์ออกจะได้ qrcode.js กับ  qrcode.min.js และ jquery.min.js
3. ให้ <script> ใส่ไว้ที่ ส่วนหัว

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

4. ส่วน Body เพิ่ม Div tag id qrcode เพื่อให้ส่วนนี้แสดงภาพ QR Code และเพิ่ม การรับค่า Text ในช่อง Input ดังนี้ 
   <input id="text" type="text" value="ค่าที่ต้องการ" style="width:80%" />
   <div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>

5. ส่วน Body ในส่วนที่รับค่าตัวอักษรใส่ดังนี้ครับ

   <input id="text" type="text" value="http://keng.ws" style="width:80%" /><br />
   <div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>

6. ในส่วนก่อนปิดท้ายให้ใส่คำสั่ง JS ดังนี้เพิ่มเติมเพื่อกำหนดคุณลักษณะต่างๆของ QR และสร้าง QR Code

   <script type="text/javascript">
   var qrcode = new QRCode(document.getElementById("qrcode"), {
   width : 100,
   height : 100. });
   
   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>

7.  ตัวอย่างที่นี่ครับ ลองประยุกต์การใช้งานดูนะครับ