Generate QRCode ด้วย Javascript

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

Download Code จาก Github QRCodeJS ที่นี่
แตกไฟล์ออกจะได้ qrcode.js กับ  qrcode.min.js และ jquery.min.js

ให้ <script> ใส่ไว้ที่ ส่วนหัว

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

ส่วน 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>

ในส่วนก่อนปิดท้ายให้ใส่คำสั่ง 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>

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

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น

Up Next:

รีวิว ภาพตัวอย่างจากกล้อง Huawei Y7A

รีวิว ภาพตัวอย่างจากกล้อง Huawei Y7A