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