การใช้ jsQR.js เพื่ออ่าน QR Code ใน JavaScript

bysemicon -
0

 


jsQR.js เป็นไลบรารี JavaScript ที่ใช้สำหรับอ่าน QR Code จากภาพโดยไม่ต้องใช้ API ภายนอก รองรับการใช้งานทั้งบนเว็บและแอปพลิเคชันที่ต้องการสแกน QR Code โดยใช้กล้องหรือภาพที่อัปโหลด

ติดตั้ง jsQR.js

คุณสามารถดาวน์โหลดไฟล์ jsQR.js หรือใช้ผ่าน CDN ได้ดังนี้:

<script src="https://cdn.jsdelivr.net/npm/jsqr/dist/jsQR.js"></script>


วิธีใช้งาน

1. อ่าน QR Code จากภาพที่อัปโหลด

<input type="file" id="upload" accept="image/*">
<canvas id="canvas" style="display:none;"></canvas>
<p id="result"></p>

<script>
  document.getElementById('upload').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (!file) return;
    
    const reader = new FileReader();
    reader.onload = function(e) {
      const img = new Image();
      img.src = e.target.result;
      img.onload = function() {
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0, img.width, img.height);
        
        const imageData = ctx.getImageData(0, 0, img.width, img.height);
        const code = jsQR(imageData.data, imageData.width, imageData.height);
        
        if (code) {
          document.getElementById('result').innerText = 'QR Code: ' + code.data;
        } else {
          document.getElementById('result').innerText = 'ไม่พบ QR Code';
        }
      };
    };
    reader.readAsDataURL(file);
  });
</script>


2. อ่าน QR Code จากกล้อง

<video id="video" autoplay></video>
<canvas id="canvas" style="display:none;"></canvas>
<p id="result"></p>

<script>
  navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } })
    .then(stream => {
      const video = document.getElementById('video');
      video.srcObject = stream;
      video.setAttribute("playsinline", true);
      video.play();
      scanQR();
    });
  
  function scanQR() {
    const video = document.getElementById('video');
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const code = jsQR(imageData.data, imageData.width, imageData.height);
    
    if (code) {
      document.getElementById('result').innerText = 'QR Code: ' + code.data;
    } else {
      requestAnimationFrame(scanQR);
    }
  }
</script>


สรุป

jsQR.js เป็นไลบรารีที่มีประสิทธิภาพในการอ่าน QR Code จากภาพและกล้องโดยไม่ต้องใช้ API ภายนอก เหมาะสำหรับการใช้งานในแอปพลิเคชันบนเว็บที่ต้องการความสะดวกและความเร็วในการสแกน QR Code

แหล่งข้อมูลเพิ่มเติม

Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า