Le framework MUI utilise HTML5 pour implémenter la fonction d'analyse de code QR-tutoriel HTML-php.cn

Le framework MUI utilise HTML5 pour implémenter la fonction d'analyse de code QR

小云云

Libérer： 2018-03-03 10:11:09

original

4291 Les gens l'ont consulté

1. Introduction

Le module Barcode gère la numérisation des codes-barres et fournit des fonctions de numérisation et d'identification des codes-barres courants (codes QR et codes unidimensionnels) La caméra de l'appareil peut être appelée pour numériser des images de codes-barres pour la saisie de données. . Les objets de gestion de codes-barres peuvent être obtenus via plus.barcode.

2. Effet de mise en œuvre

3. Code de mise en œuvre

<!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>

Copier après la connexion

3. > a, p occupe toute la page

1, la largeur et la hauteur de ce p sont de 100%, la hauteur de l'élément parent est également la même (et ainsi de suite jusqu'au nœud racine), soit la position de ce p est absolu ;

2. Vous pouvez utiliser js pour définir dynamiquement la largeur et la hauteur de la page

b Le contrôle de numérisation a des marges supérieure et inférieure

var height = window.innerHeight + 'px';//获取页面实际高度  
var width = window.innerWidth + 'px';  
document.getElementById("bcid").style.height= height;  
document.getElementById("bcid").style.width= width;

Copier après la connexion

et remplissez-le de noir pour diluer la différence visuelle, pas réellement résolu, (si vous le résolvez, veuillez laisser un message, merci)

Recommandations associées :

HTML5. Développement hybride Numérisation de code QR et appel d'un exemple de tutoriel de caméra locale

Exemple de code H5 pour la numérisation et l'analyse de code QR

Html5 Implémentation de la numérisation de code QR et conseils du didacticiel Parsing_html5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!