สวัสดีครับ ในบทความนี้ผมจะแนะนำวิธีการ แปลง 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>
- ส่วน 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>
- ในส่วนก่อนปิดท้ายให้ใส่คำสั่ง 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>
- ตัวอย่างที่นี่ครับ ลองประยุกต์การใช้งานดูนะครับ