js生成二维码和解析二维码

简介: js生成二维码和解析二维码

这个整了好久,用的包换了好几次,所以记录一下

生成二维码

<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

reqrcode和qrcode

目录
相关文章
|
6天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
6天前
|
前端开发 JavaScript 编译器
深入解析JavaScript中的异步编程:Promises与async/await的使用与原理
【4月更文挑战第22天】本文深入解析JavaScript异步编程,重点讨论Promises和async/await。Promises用于管理异步操作,有pending、fulfilled和rejected三种状态。通过.then()和.catch()处理结果,但可能导致回调地狱。async/await是ES2017的语法糖,使异步编程更直观,类似同步代码,通过事件循环和微任务队列实现。两者各有优势,适用于不同场景,能有效提升代码可读性和维护性。
|
1月前
|
自然语言处理 JavaScript 前端开发
Vue.js 深度解析:模板编译原理与过程
Vue.js 深度解析:模板编译原理与过程
|
1月前
|
缓存 JavaScript 网络架构
Vue.js 进阶技巧:keep-alive 缓存组件解析
Vue.js 进阶技巧:keep-alive 缓存组件解析
|
1月前
|
JavaScript 前端开发 API
Vue.js 深度解析:nextTick 原理与应用
Vue.js 深度解析:nextTick 原理与应用
|
1月前
|
JavaScript 前端开发 IDE
JavaScript 中的 structuredClone():详尽解析
您是否知道,现在 JavaScript 中有一种原生的方式可以深拷贝对象?
|
2月前
|
Java API Spring
开源!一款基于Spring Boot的二维码生成和解析工具
开源!一款基于Spring Boot的二维码生成和解析工具
40 1
|
2月前
|
前端开发 JavaScript BI
JavaScript的过滤大师:深度解析Filter用法
JavaScript的过滤大师:深度解析Filter用法
71 0
|
Web App开发 移动开发 前端开发
javascript生成二维码
javascript生成二维码
javascript生成二维码
|
Web App开发 JavaScript 前端开发
javascript生成二维码
摘要:   百度百科上是这样介绍二维码的:二维码(Quick Response Code),又称二维条码,它是用特定的几何图形按一定规律在平面(二维方向)上分布的黑白相间的图形,是所有信息数据的一把钥匙。
1302 0

推荐镜像

更多