移动端H5(JavaScript)识别二维码功能_html-js-css

前言
时隔一年多，再次接触到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 & 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>

</html>

识别结果
这里说下测试扫描二维码可以百度搜索草料二维码生成器生成完一个二维码保存到手机或者电脑上，然后点击识别二维码就完事儿了。

这里是用uniapp做的识别二维码功能 uniapp H5 扫码扫一扫功能

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1321741.html

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

发表评论

评论列表（0条）