掃瞄QRCODE

只靠 HTML 前端技術就可以使用相機，那麼最實用的功能就是掃瞄 QRCODE ，這裡提供一個最簡單易用的方式 使用函式庫：https://github.com/mebjas/html5-qrcode ``` $mmcode(r1) ``` <div class="mmresult r1"> <button id="b072401_idfront">Front</button> <button id="b072401_idback">Back</button> <button id="b072401_idstop">Stop</button> <input type="file" id="b072401_idfile" accept="image/*"> <hr> <div id="b072401_idresult"></div> <hr> <div id="b072401_reader" style="display:inline-block;width:320px;" ></div> <script> $(function() { const html5QrCode = new Html5Qrcode("b072401_reader"); const qrCodeSuccessCallback = (decodedText, decodedResult) => { $("#b072401_idresult").html(JSON.stringify(decodedResult,"",4)) }; const config = { fps: 10, qrbox: { width: 200, height: 200 } }; $("#b072401_idfront").on("click",function() { $("#b072401_idstop").click(); html5QrCode.start({ facingMode: "user" }, config, qrCodeSuccessCallback); }) $("#b072401_idback").on("click",function() { $("#b072401_idstop").click(); html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback); }) $("#b072401_idstop").on("click",function() { try { html5QrCode.stop().then((ignore) => { console.log("stop ok") }).catch((err) => { console.log("stop err") }); } catch(e){} }) $("#b072401_idfile").on("change",function(e) { $("#b072401_idstop").click(); if (e.target.files.length == 0) { // No file selected, ignore return; } const imageFile = e.target.files[0]; // Scan QR Code html5QrCode.scanFile(imageFile, true) .then((decodedText) => { $("#b072401_idresult").html(decodedText) }) .catch(err => { console.log(`Error scanning file. Reason: ${err}`) }); }) }) </script> <script src="https://yiharng.github.io/html5-qrcode.min.js"></script> </div>

只靠 HTML 前端技術就可以使用相機，那麼最實用的功能就是掃瞄 QRCODE ，這裡提供一個最簡單易用的方式

使用函式庫：https://github.com/mebjas/html5-qrcode

  <button id="b072401_idfront">Front</button>
  <button id="b072401_idback">Back</button>
  <button id="b072401_idstop">Stop</button>
  <input type="file" id="b072401_idfile" accept="image/*">
  <hr>
  <div id="b072401_idresult"></div>
  <hr>
  <div id="b072401_reader" style="display:inline-block;width:320px;"></div>
  <script>
    $(function()
      {
      const html5QrCode = new Html5Qrcode("b072401_reader");
      const qrCodeSuccessCallback = (decodedText, decodedResult) => 
      {
        $("#b072401_idresult").html(JSON.stringify(decodedResult,"",4))
      };
      const config = 
            { 
              fps: 10, 
              qrbox: { width: 200, height: 200 } 
            };
      $("#b072401_idfront").on("click",function()
                               {
        $("#b072401_idstop").click();
        html5QrCode.start({ facingMode: "user" }, config, qrCodeSuccessCallback);
      })
      $("#b072401_idback").on("click",function()
                              {
        $("#b072401_idstop").click();
        html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);
      })
      $("#b072401_idstop").on("click",function()
                              {
        try
        {
          html5QrCode.stop().then((ignore) => 
                                  {
            console.log("stop ok")
          }).catch((err) => {
            console.log("stop err")
          });
        }
        catch(e){}
      })
      $("#b072401_idfile").on("change",function(e)
                              {
        $("#b072401_idstop").click();
        if (e.target.files.length == 0) {
          // No file selected, ignore 
          return;
        }
        const imageFile = e.target.files[0];
        // Scan QR Code
        html5QrCode.scanFile(imageFile, true)
          .then((decodedText) => {
          $("#b072401_idresult").html(decodedText)
        })
          .catch(err => {
          console.log(`Error scanning file. Reason: ${err}`)
        });
      })
    })
  </script>
  <script src="https://yiharng.github.io/html5-qrcode.min.js"></script>

---

---