咨询热线 ：
028-86922220
×
01
关于我们

公司简介

发展历程

02
服务项目

高端网站建设

微信开发

APP开发

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03
小程序开发

小程序开发

功能应用

客户案例

04
案例展示

网站建设案例

小程序案例

电商平台案例

APP案例

系统平台案例

05
建站动态

网站建设

网站设计

常见问题

小程序

06
联系我们

公司地址

人才招聘

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

重庆分公司，新征程启航

为企业提供网站建设、域名注册、服务器等服务

HTML5如何混合开发二维码扫描以及调用本地摄像头

这篇文章主要介绍HTML5如何混合开发二维码扫描以及调用本地摄像头，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联主营丰润网站建设的网络公司,主营网站建设方案,app开发定制,丰润h5小程序开发搭建,丰润网站营销推广欢迎丰润等地区企业咨询

在线二维码图片生成器

二维码扫描:(使用的是mui的框架,下面是html代码)

  
  
     
      
      
      
      
      
      
        #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;  
        }  
      
     
    
      
        
      H5webapp二维码扫描  
        
      
          
         
                   
    
                             从相册选择二维码
           取　 消
                                     var height = window.innerHeight + 'px';//获取页面实际高度       var width = window.innerWidth + 'px';       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('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 ) {  //这个是扫描二维码的回调函数，type是扫描二维码回调的类型                     var text = '';                       switch(type){ //QR,EAN13,EAN8都是二维码的一种编码格式,result是返回的结果                         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);               });           }                                              

下面是包结构:开发工具是hbuilder

HTML5如何混合开发二维码扫描以及调用本地摄像头

HTML5如何混合开发二维码扫描以及调用本地摄像头

HTML5如何混合开发二维码扫描以及调用本地摄像头

mui.plusReady函数主要是初始化作用
 

startRecognize()是开启扫描二维码的功能

onerror是错误提示

onmarked是重点，是二维码扫描后的回调函数，type是二维码识别类型，result是二维码回调的内容

scanPicture()可以直接识别本地的二维码图片并进行解析

H5调用本地摄像头




    
    
    
    
    
    
        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(){
                        //失败的回调函数
                    });
            });
        }
    


    照相

mui.init();是mui框架初始化

getCamera()方法是先生成camera对象，然后进行拍照，拍照完把图片生成图片路径打印出来

HTML5如何混合开发二维码扫描以及调用本地摄像头

HTML5如何混合开发二维码扫描以及调用本地摄像头

以上是“HTML5如何混合开发二维码扫描以及调用本地摄像头”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


网站栏目：HTML5如何混合开发二维码扫描以及调用本地摄像头
当前链接：http://cqcxhl.cn/article/gjeehh.html

其他资讯

分享至：
关于我们
公司简介 发展历程
服务项目
高端网站建设 小程序开发 APP开发 网络营销
建站知识
网站建设 网站设计 网站制作 小程序
联系我们
公司地址 人才招聘
成都 重庆
电话：028-86922220
地址：成都市太升南路288号锦天国际A幢1002号
电话：028-86922220
地址：重庆市南岸区弹子石腾龙大道58号2栋21-6
版权所有：成都创新互联科技有限公司重庆分公司 渝ICP备2021005571号-4
在线咨询
服务热线
服务热线：028-86922220
TOP