基于MUI框架的使用HTML5+实现的二维码扫描功能

转载：https://blog.csdn.net/qq_24754061/article/details/54943655
一、简介
Barcode模块管理条码扫描，提供常见的条码（二维码及一维码）的扫描识别功能，可调用设备的摄像头对条码图片扫描进行数据输入。通过plus.barcode可获取条码码管理对象。

二、实现的效果

三、实现 代码









#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;
}

物品二维码扫描

<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;
         //自定义的扫描控件样式
         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;
                }
                alert( text + " : "+ result );

        };  

    // 从相册中选择二维码图片 
    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>