備忘錄_20160105(定位) 修改 回首頁
程式　2024-10-22　16:54:44　1729587284　100
從檔案讀取QRCODE
從檔案讀取QRCODE
執行看看 
<!doctype html>
<html lang="zh-Hant-TW">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>QR Code Scanner From File</title>
  </head>
  <body>
    <div>引用 https://github.com/cozmo/jsQR/blob/master/dist/jsQR.js</div>
    <div>純粹 JavaScript 解碼 QRCode</div>
    <br>
    <input type="file" id="inpFile" accept="image/*">
    <canvas id="myCanvas" style="display: none;"></canvas>
    <p id="pResult">QR Code 內容將顯示在此處</p>

    <!-- <script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.js"></script> -->
    <script src="jsQR.js"></script>
    
    <script>
      document.getElementById('inpFile').addEventListener(
        'change',
        function(oEvent1) 
        {
          const oFile = oEvent1.target.files[0];
          const oFileReader = new FileReader();

          oFileReader.onload = 
          function(oEvent2) 
          {
            const oImg = new Image();
            oImg.src = oEvent2.target.result;

            oImg.onload = 
            function() 
            {
              const oCanvas = document.getElementById('myCanvas');
              const oCtx = oCanvas.getContext('2d');
              oCanvas.width = oImg.width;
              oCanvas.height = oImg.height;
              oCtx.drawImage(oImg, 0, 0, oImg.width, oImg.height);

              const oImageData = oCtx.getImageData(0, 0, oCanvas.width, oCanvas.height);
              const oCode = jsQR(oImageData.data, oCanvas.width, oCanvas.height);

              if(oCode)
              {
                document.getElementById('pResult').textContent = 'QR Code 內容: ' + oCode.data;
              }
              else
              {
                document.getElementById('pResult').textContent = '無法辨識 QR Code';
              }
            };
          };
          oFileReader.readAsDataURL(oFile);
        }
      );
    </script>
  </body>
</html>