JavaScript实现识别二维码信息功能

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

<input type="file" accept="image/*" capture="environment" id="fileInput" style="display: none;">
<button onclick="scanQRCode()">扫描二维码</button>

<script>
  function scanQRCode() {
    const fileInput = document.getElementById('fileInput');
    fileInput.click();
 
    fileInput.onchange = function() {
      const file = fileInput.files[0];
      const reader = new FileReader();
 
      reader.onload = function(e) {
        const img = new Image();
        img.src = e.target.result;
 
        img.onload = function() {
          const canvas = document.createElement('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) {
            alert('扫描结果: ' + code.data);
          } else {
            alert('未识别到二维码');
          }
        };
      };
 
      reader.readAsDataURL(file);
    };
  }
</script>