首页 > 其他分享 >Html5QRCode扫描条形码+二维码

Html5QRCode扫描条形码+二维码

时间:2024-11-08 09:41:32浏览次数:3  
标签:function 条形码 Html5QRCode decodedText qrCodeSuccessCallback 二维码 html readResult h

代码:

<html>
<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>scan</title>
    <style>
        button {
            display: block;
            width: 100%;
            margin: 6px;
            outline: none;
            height: 40px;
            line-height: 40px;
            color: #fff;
            background-color: #26a2ff;
            text-align: center;
            border-radius: 4px;
            border: none;
            cursor: pointer;
        }

        #qr-input-file {
            opacity: 0;
            filter: alpha(opacity=0);
            display: inline-block;
            width: 100%;
            height: 100%;
        }

        #upload-text {
            position: relative;
            bottom: 40px;
            user-select: none;
        }
    </style>
    <script src="~/easyui/jquery.min.js"></script>
    <script src="~/scan/html5-qrcode.min.js"></script>
</head>
<body>
    <button id="refresh">刷新</button>
    <button id="scan">使用相机扫一扫方式</button>
    <button id="useLocal">
        <input type="file" id="qr-input-file" accept="image/*" value="使用文件方式">
        <span id="upload-text">使用文件方式</span>
    </button>
    <H3 id="readResult"></H3>
    <div id="reader" width="600px"></div>
</body>
<script>
    function onScanSuccess(decodedText, decodedResult) {
        $('#readResult').html(decodedText + ":" + decodedResult);
    }
    function onScanFailure(error) {
        $('#readResult').html(error);
    }

    $(function () {
        $('#refresh').click(function () {
            location.reload();
        });

        $('#scan').click(function () {
            $('#readResult').html("");
            const html5QrCode = new Html5Qrcode("reader");
            const qrCodeSuccessCallback = (decodedText, decodedResult) => {
                /* handle success */
                $('#readResult').html("扫描成功:" + decodedText);
                //关闭摄像头
                html5QrCode.stop().then((ignore) => {
                    // QR Code scanning is stopped.
                }).catch((err) => {
                    // Stop failed, handle it.
                });
            };
            const config = { fps: 10, qrbox: { width: 250, height: 250 } };

            // If you want to prefer front camera
            //html5QrCode.start({ facingMode: "user" }, config, qrCodeSuccessCallback);

            // If you want to prefer back camera
            html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);

            // Select front camera or fail with `OverconstrainedError`.
            //html5QrCode.start({ facingMode: { exact: "user"} }, config, qrCodeSuccessCallback);

            // Select back camera or fail with `OverconstrainedError`.
            //html5QrCode.start({ facingMode: { exact: "environment"} }, config, qrCodeSuccessCallback);


        })
        //选择文件扫描
        $('#qr-input-file').change(function (e) {
            $('#readResult').html("");
            const html5QrCode = new Html5Qrcode("reader");
            if (e.target.files.length == 0) {
                // No file selected, ignore
                return;
            }

            const imageFile = e.target.files[0];
            // Scan QR Code
            html5QrCode.scanFile(imageFile, true)
                .then(decodedText => {
                    // success, use decodedText
                    //console.log(decodedText);
                    $('#readResult').html(decodedText);
                    $('#qr-input-file').val('');
                })
                .catch(err => {
                    // failure, handle it.
                    console.log(`Error scanning file. Reason: ${err}`)
                    $('#readResult').html("扫描错误:" + err);
                });
        });

    })
</script>
</html>

 

效果:

 

 

 

参阅:https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5Qrcode#start(官网)

https://blog.csdn.net/qq_60654563/article/details/140920510

 

标签:function,条形码,Html5QRCode,decodedText,qrCodeSuccessCallback,二维码,html,readResult,h
From: https://www.cnblogs.com/dzw159/p/18534497

相关文章

  • Halcon 二维码识别
        二维条形码(2-DimensionalBarCode)在水平和竖直方向的二维空间存储信息,其特点是信息容量大、安全性强、保密性高(可加密)、识别率高、编码范围广等。除此之外,二维条形码还可将汉字、图像等信息进行优化编码处理具有全方位识别,并可引入加密机制的功能。因此,二维条形码......
  • 给DedeCMS增加二维码功能
    问题:如何给DedeCMS增加二维码功能?解决方法:修改 extend.func.php 文件:打开 include/extend.func.php 文件,在文件末尾添加以下内容:functionqr_code($id,$size=200){return'https://api.qrserver.com/v1/create-qr-code/?size='.$size.'x'.$size.'&data=&......
  • 简单的Java二维码应用
    闲来无事做一个java的小应用玩玩,可以模拟微信小程序刷二维码。需要解决的主要问题:二维码获取二维码展示1.抓包微信小程序,获取所需信息微信电脑版可以登录小程序,通过Charles可以抓包。配置Charles,可以参考文章:charles使用教程,只要配置好证书就行运行Charles,打开微信小......
  • 基于MATLAB的条形码的识别图像处理报告
    一、设计任务及要求3二、设计原理及设计方案3、条码译码原理3条码译码方案4三、设计步骤与结果10   设计步骤10   结果分析11四、课程设计总结15五、心得体会15六、参考文献16附录一、源程序17附录二、成绩评定表25设计任务及要求......
  • 射频标签和条形码有什么区别
    射频标签和条形码的区别:1.技术原理不同;2.应用范围;3.成本;4.数据容量;5.读取距离;6.环境适应性;7.可读写性。射频标签可存储更多信息,支持远距离无线读取,且数据可读写,而条形码则通常成本较低,但仅能存储有限的信息,并需要直线视野内读取。1.技术原理不同射频标签利用无线电频率识别技......
  • java springboot+maven 对接支付宝生成支付二维码;查看订单;取消订单;退款
    支付宝提供了测试环境支付宝沙箱:先登录开放平台https://openhome.alipay.com/develop/manage这边能拿到调用支付宝接口所需要的所有参数代码部分:首先引入依赖:<dependency><groupId>com.alipay.sdk</groupId><artifactId>alipay-sdk-java</art......
  • Java 制作二维码
    最近刷题遇到了java制作二维码的功能pom文件<dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.4.1</version></dependency><dependency>......
  • Android开发教程二维码扫描功能
    Android开发教程二维码扫描功能二维码扫描大一点的app都有的功能,因为扫一下真的很方便一、思路:用zxing库二、效果图:看视频更加直观点:Android开发教程实战案例源码分享-二维码扫描功能三、关键代码:classFCaptureActivity:AppCompatActivity(),SurfaceHolder......
  • Java 当中使用 “google.zxing ”开源项目 和 “github 的 qrcode-plugin” 开源项目
    Java当中使用“google.zxing”开源项目和“github的qrcode-plugin”开源项目生成二维码@目录Java当中使用“google.zxing”开源项目和“github的qrcode-plugin”开源项目生成二维码1.Java当中使用“google.zxing”开源项目生成二维码1.1准备工作1.2生成......
  • CTF学习( 3):Misc(二维码)
    1.见到二维码图片,查看详细信息是否藏有flag(无果),使用QRResearch查看二维码中是否藏有隐藏信息(发现)2.使用010editor打开后文本搜索flag,key等关键字无果->发现在文件尾藏了数据(笔记:PNG文件由文件头"89504E47"和数据块"chuk"组成,504B0304是zip文件的文件头)3.......