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

词不达意难知

已于 2022-05-18 13:44:04 修改

阅读量3.7k

点赞数 4

分类专栏： JavaScript JQuery 文章标签： javascript 前端 html5

于 2022-05-18 13:16:59 首次发布

本文链接：https://blog.csdn.net/qq_45284938/article/details/124840013

版权

JavaScript 同时被 2 个专栏收录

29 篇文章 1 订阅

订阅专栏

JQuery

6 篇文章 0 订阅

订阅专栏

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

词不达意难知

关注

4
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
12
评论
移动端H5(JavaScript)识别二维码功能

前言时隔一年多，再次接触到H5识别二维码功能，这次直接写个demo方便大家学习和使用。(其实是方便自己抄自己代码…)。直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con
复制链接

扫一扫