二维码扫描

最新推荐文章于 2021-03-22 10:26:01 发布
Yonfly
最新推荐文章于 2021-03-22 10:26:01 发布
阅读量199
点赞数 1
分类专栏： HTML5+API
本文链接：https://blog.youkuaiyun.com/m0_37894611/article/details/97002379
版权
HTML5+API 专栏收录该内容
12 篇文章
订阅专栏
<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>扫码器</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
        <script src="js/mui.min.js"></script>
        <style type="text/css">
            #bcid {
                width: 100%;
                height: 100%;
                position: absolute;
                background: #000000;
            }
            
            html,
            body,
            div {
                height: 100%;
                width: 100%;
            }
            
            .fbt {
                color: #0E76E1;
                width: 50%;
                background-color: #ffffff;
                float: left;
                line-height: 44px;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <header class="mui-bar mui-bar-nav" style="background-color: #ffffff;">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title" style="color: #0E76E1;">二维码扫描</h1>
            <span class="mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right" id="turnTheLight"></span>
        </header>
        <div id="bcid">
            <!--扫描控件的div-->
        </div>
        <div class="mui-bar mui-bar-footer" style="padding: 0px;">
            <div class="fbt" onclick="scanPicture();">从相册选择二维码</div>
            <div class="fbt mui-action-back">取　 消</div>
        </div>
        <script type="text/javascript">
            scan = null; //扫描对象  
            mui.plusReady(function() {
                mui.init();
                startRecognize();
            });

            function startRecognize() {
                try {
                    var filter = [plus.barcode.CODE128,plus.barcode.QR];//可以指定类型
                    //自定义的扫描控件样式  
                    var styles = {
                        frameColor: "#29E52C",
                        scanbarColor: "#29E52C",
                        background: ""
                    }
                    //扫描控件构造  
                    scan = new plus.barcode.Barcode('bcid', filter, styles);
                    scan.onmarked = onmarked;
                    scan.onerror = onerror;
                    scan.start();
                    //打开关闭闪光灯处理  
                    var flag = false;
                    document.getElementById("turnTheLight").addEventListener('tap', function() {
                        if(flag == false) {
                            scan.setFlash(true);
                            flag = true;
                        } else {
                            scan.setFlash(false);
                            flag = false;
                        }
                    });
                } catch(e) {
                    alert("出现错误啦:\n" + e);
                }
            };

            function onerror(e) {
                alert(e);
            };

            function onmarked(type, result) {
                var text = '';
                switch(type) {
                    case plus.barcode.QR:
                        text = 'QR';
                        break;
                    case plus.barcode.EAN13:
                        text = 'EAN13';
                        break;
                    case plus.barcode.EAN8:
                        text = 'EAN8';
                        break;
                    default:
                        text = 'Code128';
                        break;
                }
                var view = plus.webview.getWebviewById(plus.runtime.appid);
                mui.fire(view, 'barcode', {    
                    _val:result,
                    _type:text
                });
                mui.back();
            };
            // 从相册中选择二维码图片   
            function scanPicture() {
                plus.gallery.pick(function(path) {
                    plus.barcode.scan(path, onmarked, function(error) {
                        plus.nativeUI.alert("无法识别此图片");
                    });
                }, function(err) {
                    plus.nativeUI.alert("Failed: " + err.message);
                });
            }
        </script>
    </body>

</html>