这个整了好久,用的包换了好几次,所以记录一下
生成二维码
<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]是通过input file上传的二维码图片文件 qrcode.decode(getObjectURL(this.files[0])); qrcode.callback = function (imgMsg) { //imgMsg 就是解析后的路径 document.getElementById('result').innerText = decodeStr(imgMsg); } } //获取预览图片路径 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>
然后是两个引入的js