บทความนี้จะแนะนำคุณทีละขั้นตอน ตั้งแต่การเตรียมไฟล์ไปจนถึงการเขียนโค้ดและทดสอบการทำงาน
สร้างไฟล์ index.html
โค้ด: เลือกทั้งหมด
<body>
<div class="container">
<h1>สร้าง QR Code แบบ Real-Time</h1>
<p>กรอกข้อความหรือ URL ในช่องด้านล่าง แล้ว QR Code จะปรากฏขึ้นทันที!</p>
<input type="text" id="textInput" placeholder="เช่น https://www.example.com" value="ใส่ข้อความที่นี่">
<div id="qrcode"></div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script src="app.js"></script>
</body>
- ส่วนนี้เป็นการใช้ไลบรารี qr code
โค้ด: เลือกทั้งหมด
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
โค้ด: เลือกทั้งหมด
<script src="app.js"></script>
- สร้างไฟล์ app.js
โค้ด: เลือกทั้งหมด
// 1. เลือก Element ที่ต้องการใช้
const textInput = document.getElementById('textInput');
const qrcodeContainer = document.getElementById('qrcode');
// 2. สร้าง Instance ของ QRCode
// กำหนด div ที่จะแสดงผล QR Code, ข้อความเริ่มต้น, และขนาด
// QRCode(element, options)
const qrcode = new QRCode(qrcodeContainer, {
text: textInput.value, // ใช้ค่าจาก input เป็นค่าเริ่มต้น
width: 150,
height: 150,
colorDark : "#2c3e50", // สีของ pixel
colorLight : "#ecf0f1", // สีพื้นหลัง
correctLevel : QRCode.CorrectLevel.H // ระดับการแก้ไขข้อผิดพลาด (L, M, Q, H) - H คือระดับสูงสุด
});
// 3. เพิ่ม Event Listener เพื่ออัปเดต QR Code เมื่อข้อมูลเปลี่ยน
textInput.addEventListener('input', function() {
// ดึงค่าใหม่จากช่อง input
const newText = this.value;
// ถ้าช่อง input ว่าง ให้แสดงข้อความ default
if (newText.trim() === '') {
qrcode.makeCode('ใส่ข้อความที่นี่'); // แสดงข้อความ default
} else {
// อัปเดต QR Code ด้วยข้อความใหม่
qrcode.makeCode(newText);
}
});- กำหนดรูปแบบ qr code
โค้ด: เลือกทั้งหมด
const qrcode = new QRCode(qrcodeContainer, {
text: textInput.value, // ใช้ค่าจาก input เป็นค่าเริ่มต้น
width: 150,
height: 150,
colorDark : "#2c3e50", // สีของ pixel
colorLight : "#ecf0f1", // สีพื้นหลัง
correctLevel : QRCode.CorrectLevel.H // ระดับการแก้ไขข้อผิดพลาด (L, M, Q, H) - H คือระดับสูงสุด
});
โค้ด: เลือกทั้งหมด
textInput.addEventListener('input', function() {
// ดึงค่าใหม่จากช่อง input
const newText = this.value;
// ถ้าช่อง input ว่าง ให้แสดงข้อความ default
if (newText.trim() === '') {
qrcode.makeCode('ใส่ข้อความที่นี่'); // แสดงข้อความ default
} else {
// อัปเดต QR Code ด้วยข้อความใหม่
qrcode.makeCode(newText);
}
});- jQuery & Ajax Knowledge-1.png (18.75 KiB) Viewed 82 times
- jQuery & Ajax Knowledge-2.png (17.72 KiB) Viewed 82 times
การสร้าง QR Code ด้วย JavaScript เป็นวิธีที่รวดเร็วและมอบประสบการณ์ที่ดีแก่ผู้ใช้งาน เพราะการประมวลผลทั้งหมดเกิดขึ้นบนเบราว์เซอร์ จึงไม่ต้องพึ่งพาเซิร์ฟเวอร์ในการสร้างรูปภาพ ทำให้คุณสามารถสร้างแอปพลิเคชันที่มีน้ำหนักเบาและตอบสนองได้ดี การสร้าง QR Code ด้วย JavaScript เหมาะอย่างยิ่งสำหรับโปรเจกต์ที่ต้องการความรวดเร็วและเรียบง่าย คุณสามารถนำความรู้นี้ไปต่อยอดสร้างเครื่องมือที่มีประโยชน์มากมายบนเว็บไซต์ของคุณได้เลย!
ข้อดีหลักๆ:
- Real-time: QR Code อัปเดตทันทีที่ผู้ใช้พิมพ์
- ไม่ต้องใช้ Backend: ไม่ต้องเขียนโค้ดฝั่งเซิร์ฟเวอร์ (PHP, Python, Node.js)
- ทำงานแบบ Offline ได้: หากไฟล์ไลบรารีถูกดาวน์โหลดไว้แล้ว ก็ยังสามารถสร้าง QR Code ได้แม้ไม่มีการเชื่อมต่ออินเทอร์เน็ต
ข้อจำกัด:
- ความปลอดภัยของข้อมูล: ข้อมูลที่ใช้สร้าง QR Code ถูกประมวลผลบนฝั่งผู้ใช้ ซึ่งอาจไม่เหมาะกับข้อมูลที่ละเอียดอ่อนมาก
- ไม่สามารถบันทึกเป็นไฟล์บนเซิร์ฟเวอร์ได้โดยตรง
อ้างอิง
- https://www.mindphp.com/คู่มือ/73-คืออะ ... -code.html
- https://www.mindphp.com/คู่มือ/73-คืออะ ... ออะไร.html
- https://www.mindphp.com/คู่มือ/73-คืออะ ... ออะไร.html
- viewtopic.php?t=108889
- https://www.mindphp.com/บทเรียนออนไลน์/ ... -time.html