HTML5 하이브리드 개발 QR 코드 스캔 및 로컬 카메라 호출 예제 튜토리얼-H5 튜토리얼-php.cn

HTML5 하이브리드 개발 QR 코드 스캔 및 로컬 카메라 호출 예제 튜토리얼

小云云

풀어 주다： 2017-12-30 13:43:35

원래의

8392명이 탐색했습니다.

오늘 하이브리드 개발을 사용하고 H5를 사용하여 로컬 카메라를 호출하여 QR 코드를 스캔해야 한다는 작업을 받았습니다. 이전에는 주로 zxing 플러그인을 호출하여 기본 Android QR 코드 스캔을 수행했습니다. 하지만 저는 순수 H5에 노출된 적이 없었고, 어떻게 해야 할지 몰랐기 때문에 밤에 집에 가서 온라인으로 솔루션을 찾기 시작했습니다. 다음은 제가 이해한 H5 QR 스캔 코드입니다. 코드를 작성하고 지역 카메라에 전화하는 것이 모든 사람에게 도움이 되기를 바랍니다.

인기 과학 웹사이트:

H5는 Android 구성 요소 개체를 생성하는 방법
H5는 Android 로컬 카메라 API를 호출합니다.
온라인 QR 코드 이미지 생성기

QR 코드 스캐닝: (mui 프레임워크를 사용하면 다음은 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>

로그인 후 복사

다음은 패키지 구조입니다. 개발 도구는 hbuilder입니다.

mui.plusReady 함수는 주로 초기화에 사용됩니다

startRecognize()는 QR 코드 스캔 기능을 활성화하는 것입니다

onerror 는 표시된 오류 메시지

가 핵심이며 QR 코드 스캔 후 콜백 함수, 유형이 QR 코드 인식 유형, 결과가 QR 코드 콜백 내용

scanPicture()는 그림을 로컬 2D 코딩하고 구문 분석할 수 있습니다.

H5는 로컬 카메라를 호출합니다.

<!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()는 mui 프레임워크의 초기화입니다.

getCamera() 메서드는 다음과 같습니다. 먼저 카메라 객체를 생성한 다음 사진을 찍고 사진을 찍은 후 이미지를 생성합니다. 이미지 경로를 인쇄하세요