집 >웹 프론트엔드 >HTML 튜토리얼 >MUI 프레임워크는 HTML5를 사용하여 QR 코드 스캔 기능을 구현합니다.

MUI 프레임워크는 HTML5를 사용하여 QR 코드 스캔 기능을 구현합니다.

小云云원래의: 2018-03-03 10:11:094274검색

1. 소개

바코드 모듈은 바코드 스캐닝을 관리하고 일반 바코드(QR 코드 및 1차원 코드)에 대한 스캐닝 및 식별 기능을 제공하며 장치의 카메라를 호출하여 데이터 입력을 위한 바코드 이미지를 스캔할 수 있습니다. 바코드 관리 객체는 plus.barcode를 통해 얻을 수 있습니다.

2. 구현 효과

3. 구현 코드

<!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 ,p{  
            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>  
    <p id="bcid">     
         <!--盛放扫描控件的p-->          
    </p>  
    <p class="mui-bar mui-bar-footer" style="padding: 0px;">  
        <p class="fbt" onclick="scanPicture();">从相册选择二维码</p>  
        <p class="fbt mui-action-back">取　 消</p>  
    </p>  
    <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>  
</html>

3. 프로세스 중에 발생한 문제

a, p가 전체 페이지를 차지합니다

1. 이 p의 너비와 높이는 다음과 같습니다. 100%, 상위 요소의 높이도 동일하거나(루트 노드까지 동일), 이 p의 위치는 절대값입니다.

2. js를 사용하여 페이지 너비와 높이를 동적으로 설정할 수 있습니다.

b, 그리고 스캔 컨트롤에는 위쪽과 아래쪽 여백이 있습니다

검정색 채우기를 사용하여 시각적 차이를 희석했지만 실제로 해결되지 않았습니다. (해결하시면 메시지를 남겨주세요. 감사합니다)

MUI 프레임워크는 HTML5를 사용하여 QR 코드 스캔 기능을 구현합니다.

관련 기사