這個(gè)整了好久，用的包換了好幾次，所以記錄一下

生成二維碼

  <div class="container">
    <div class="row">
      <div class="col-md-6 mx-auto my-5">
        <form class="text-center">
          <div class="form-group">
            <label for="message">Enter message:</label>
            <textarea class="form-control" id="message" name="message" rows="5" placeholder="Type your message here"></textarea>
          </div>
          <button type="button" class="btn btn-primary" onclick="generateQRCode()">Generate QR Code</button>
        </form>
        <div id="qrcode" class="mt-4"></div>
      </div>
    </div>
  </div>

  <script src="/js/qrcode.min.js"></script>
  <script>
    function generateQRCode() {
      var message = document.getElementById("message").value;
      var qrcode = new QRCode(document.getElementById("qrcode"), {
        text: message,
        width: 256,
        height: 256,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      });
    }

  </script>

解析二維碼

  <div class="container">
    <div class="row">
      <div class="col-md-6 mx-auto my-5">
        <form class="text-center">
                <input type="file" id="uploadInput" accept="image/*">
            
              </form>
              <div id="result"></div>
        </form>
        <div id="qrcode" class="mt-4"></div>
      </div>
    </div>
  </div>
  




    <script src="js/reqrcode.js"></script>

  <script>
    const form = document.getElementById('uploadForm');
    const input = document.getElementById('uploadInput');
    input.onchange = function () {
        // files[0]是通過(guò)input file上傳的二維碼圖片文件
        qrcode.decode(getObjectURL(this.files[0]));
        qrcode.callback = function (imgMsg) {
        	//imgMsg 就是解析后的路徑
            document.getElementById('result').innerText = decodeStr(imgMsg);
        }
    }

    //獲取預(yù)覽圖片路徑
    var getObjectURL = function (file) {
        let url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

    function decodeStr(str) {
            var out, i, len, c;
            var char2, char3;
            out = "";
            len = str.length;
            i = 0;
            while (i < len) {
                c = str.charCodeAt(i++);
                switch (c >> 4) {
                    case 0:
                    case 1:
                    case 2:
                    case 3:
                    case 4:
                    case 5:
                    case 6:
                    case 7:
                        // 0xxxxxxx
                        out += str.charAt(i - 1);
                        break;
                    case 12:
                    case 13:
                        // 110x xxxx 10xx xxxx
                        char2 = str.charCodeAt(i++);
                        out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
                        break;
                    case 14:
                        // 1110 xxxx 10xx xxxx 10xx xxxx
                        char2 = str.charCodeAt(i++);
                        char3 = str.charCodeAt(i++);
                        out += String.fromCharCode(((c & 0x0F) << 12) |
                            ((char2 & 0x3F) << 6) |
                            ((char3 & 0x3F) << 0));
                        break;
                }
            }
            return out;
        }

  </script>

然后是兩個(gè)引入的js
reqrcode和qrcode文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-407872.html

到了這里，關(guān)于js生成二維碼和解析二維碼的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！