สอนทำเว็บไซต์

สแกนคิวอาร์โค้ดขึ้นกล่องข้อความ

สอนสแกนคิวอาร์โค้ดบาร์โค้ด

ScanQRCode.html

<!DOCTYPE html> <html lang="th"> <meta charset="UTF-8"> <head> <title>QR Code / Barcode Scanner</title> <script src="js/html5-qrcode.min.js"></script> <style> #reader { width: 400px; margin: 20px auto; border: 1px solid #ccc; padding: 10px; } #result-display { text-align: center; margin-top: 20px; } #result-input { width: 80%; padding: 10px; font-size: 1.1em; margin-top: 10px; border: 2px solid #007bff; border-radius: 5px; } </style> </head> <body> <h1 style="text-align: center;">QR/Barcode Scanner Input</h1> <div id="reader"></div> <div id="result-display"> <h2>ผลลัพธ์การสแกน:</h2> <input type="text" id="result-input" placeholder="ผลลัพธ์จาก QR Code จะปรากฏที่นี่"> </div> <script> function onScanSuccess(decodedText, decodedResult) { // เมื่อสแกนสำเร็จ console.log(`Scan result: ${decodedText}`, decodedResult); // นำผลลัพธ์ไปใส่ในช่อง input document.getElementById('result-input').value = decodedText; // (ทางเลือก) หยุดสแกนหลังจากสแกนครั้งแรกสำเร็จ // html5QrcodeScanner.clear(); } function onScanError(errorMessage) { // จัดการกับข้อผิดพลาด // console.log(`Scan error: ${errorMessage}`); } // สร้าง Object สำหรับการสแกน var html5QrcodeScanner = new Html5QrcodeScanner( "reader", { fps: 10, // Frame per second (ความเร็วในการสแกน) qrbox: {width: 250, height: 250} // ขนาดกรอบสแกน }, /* verbose= */ false ); // เริ่มการสแกน html5QrcodeScanner.render(onScanSuccess, onScanError); </script> </body> </html>