recherche

Maison >interface Web >Tutoriel H5 >Développement hybride HTML5 : numérisation de code QR et appel d'un exemple de didacticiel de caméra locale

Développement hybride HTML5 : numérisation de code QR et appel d'un exemple de didacticiel de caméra locale

小云云
小云云original
2017-12-30 13:43:358365parcourir

J'ai reçu une tâche aujourd'hui, disant que je dois utiliser le développement hybride et utiliser H5 pour appeler la caméra locale afin de scanner le code QR. J'ai déjà effectué une numérisation native du code QR Android, principalement en appelant le plug-in zxing. , et j'ai même eu un flash. Mais je n'avais jamais touché à un H5 pur et je ne savais pas quoi en faire, alors je suis rentré chez moi le soir et j'ai commencé à chercher des solutions en ligne. Voici ma compréhension et mon code du H5. scanner les codes QR et appeler les caméras locales, j'espère, pourra aider tout le monde.

Site Web scientifique populaire :

Comment H5 génère des objets composants Android
H5 appelle l'API de la caméra locale Android
Générateur d'images de code QR en ligne

Scan de code QR :( En utilisant le framework mui, voici le code html)


<!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="">  
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
      <h1 class="mui-title" style="color: #0E76E1;">H5webapp二维码扫描</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">  
    
    var height = window.innerHeight + &#39;px&#39;;//获取页面实际高度  
    var width = window.innerWidth + &#39;px&#39;;  
    document.getElementById("bcid").style.height= height;  
    document.getElementById("bcid").style.width= width; 

           scan = null;//扫描对象  
        mui.plusReady(function () {  //通过mui初始化扫描
              mui.init();  
          startRecognize();  
           });  
              
        function startRecognize(){  //开启扫描
           try{  
              var filter;  
             //自定义的扫描控件样式  
             var styles = {frameColor: "#29E52C",scanbarColor: "#29E52C",background: ""}  
            //扫描控件构造  
            scan = new plus.barcode.Barcode(&#39;bcid&#39;,filter,styles);  
            scan.onmarked = onmarked;   
            scan.onerror = onerror;  //扫描错误
            scan.start();  
            //打开关闭闪光灯处理  
            var flag = false;  
            document.getElementById("turnTheLight").addEventListener(&#39;tap&#39;,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 ) {  //这个是扫描二维码的回调函数，type是扫描二维码回调的类型
                    var text = &#39;&#39;;  
                    switch(type){ //QR,EAN13,EAN8都是二维码的一种编码格式,result是返回的结果
                        case plus.barcode.QR:  
                        text = &#39;QR: &#39;;  
                        break;  
                        case plus.barcode.EAN13:  
                        text = &#39;EAN13: &#39;;  
                        break;  
                        case plus.barcode.EAN8:  
                        text = &#39;EAN8: &#39;;  
                        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>

Voici la structure du package : l'outil de développement est hbuilder

La fonction mui.plusReady est principalement destinée à l'initialisation

startRecognize() sert à lancer la numérisation Codes QR La fonction

onerror est le message d'erreur

onmarqué est le point clé, qui est la fonction de rappel après avoir scanné le code QR, le type est la reconnaissance du code QR type, et le résultat est le 2D Le contenu du rappel de code

scanPicture() peut identifier directement l'image du code QR local et l'analyser

H5 appelle la caméra locale 


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
        document.addEventListener( "plusready", function(){
            mui.init();
        });
        function getCamera(){
            var cam = plus.camera.getCamera();
            //字符串数组,摄像头支持的拍照分辨率
            var Resolutions = cam.supportedImageResolutions[0];
            //字符串数组,摄像头支持的拍照文件格式
            var Formats = cam.supportedImageFormats[0];
            //调用拍照方法
            //capturedFile,拍照完成后，照片的存放地址
            cam.captureImage(function(capturedfile){
                //拍照成功
                alert(capturedfile);//打印一下
            },function(){
                //拍照失败
            },{
                //拍照参数
                format : Formats,
                index : 1//1表示主摄像头，2表示辅摄像头
            });
            
            var Resolutions = cam.supportedImageResolutions[0];
            //字符串数组，摄像头支持的拍照文件格式
            var Formats = cam.supportedImageFormats[0];
            //调用拍照方法
            //capturedFile,拍照完成后，照片的存放地址
            cam.captureImage(function(capturedFile){
                //拍照成功
                alert(capturedFile);//打印一下
                //调用系统方法,根据照片地址获取照片
                plus.io.resolvLocalFileSystemURL(capturedFile,
                    //成功的回调函数
                    //entry文件的相关信息
                    function(entry){
                        var img = document.createElement("img");
                        img.src = entry.toLocalURL();
                        document.documentElement.appendChild(img);
                    },function(){
                        //失败的回调函数
                    });
            });
        }
    </script>
</head>
<body>
    <button onclick="getCamera()">照相</button>
</body>
</html>

mui.init(); est l'initialisation du framework mui

la méthode getCamera() consiste à générer d'abord l'objet appareil photo, puis prenez une photo et générez l'image après avoir pris la photo Imprimez le chemin de l'image

Avez-vous tous appris ça ? j'ai envie d'essayer.

Recommandations associées :

Comment implémenter la reconnaissance de code QR en PHP - partage d'exemples

Comment générer du code QR en PHP TP5 Le package dans

Utilisez le plug-in pour générer des notes de code QR

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：HTML5 et Webkit implémentent une animation de chute de feuillesArticle suivant：HTML5 et Webkit implémentent une animation de chute de feuilles

Articles Liés

Voir plus