移动端H5(JavaScript)识别二维码功能

本文介绍: 前言时隔一年多，再次接触到H5识别二维码功能，这次直接写个demo方便大家学习和使用。(其实是方便自己抄自己代码…)。直接上代码<!DOCTYPE html&g t;<html lang=”en”&g t;<head> <meta char set=”UTF-8″> <meta http–equi v=”X-UA-Co m pat i ble” content=”IE=edge“> <m eta name=”viewport” c on

前言
时隔一年多，再次接触到H5识别二维码功能，这次直接写个demo方便大家学习和使用。(其实是方便自己抄自己代码…)。

直接上代码

QRcode下载地址长的好看的都点⭐了！！！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./reqrcode.js"></script>
    <style>
        .click_btn {
            padding: 10px 20px;
            color: #ffffff;
            background: #777CE3;
            border-radius: 8px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <input type="file" id="upFileDom" multiple style="display: none;" accept="image/*" onchange="dealFileData(event)" />
    <span class="click_btn" onclick="clickUpFile()">点击识别二维码</span>
</body>
<script>

    // 点击识别二维码
    function clickUpFile() {
        document.getElementById('upFileDom').click();
    };

    // 处理二维码信息
    function dealFileData(event) {
        // 解析二维码
        getQCode(event.target, (res) => {
            let qrInfo = decodeStr(res);
            alert(qrInfo);
        });
    };

    /**
    * @description  获取文件地址
    * @param {data}}
    * @paramdescription
    * file  文件流
    */
    function getObjectURL(file) {
        var 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
    };

    /**
    * @description  解析二维码
    * @param {dom, fn}}
    * @paramdescription
    * dom  文件流 fn 回调函数
    */
    function getQCode(dom, fn) {
        qrcode.decode(getObjectURL(dom.files[0]));
        qrcode.callback = (res) => fn(res);
    };

    /**
    * @description  中文乱码处理
    * @param {str}}
    * @paramdescription
    * str 传入字符
    */
    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 &amp; 0x1F) << 6) | (char2 &amp; 0x3F));
                    break;
                case 14:
                    // 1110 xxxx 10xx xxxx 10xx xxxx
                    char2 = str.charCodeAt(i++);
                    char3 = str.charCodeAt(i++);
                    out += String.fromCharCode(((c &amp; 0x0F) << 12) |
                        ((char2 &amp; 0x3F) << 6) |
                        ((char3 & 0x3F) << 0));
                    break;
            }
        }
        return out;
    }
</script>

</html>