项目中有用到h5识别我们的单据,单据上面有二维码. 实现的场景就是业务人员扫码 类似以下场景

 业务员拿到单据以后,直接可以扫码进入相关单据业也可以 输入二维码下方的号码进行识别

下面是h5的页面构造(部分代码参考国外网友编写的)

  1. @{
  2.     Layout = "~/Views/Shared/_MForm.cshtml";// 这里是weui的样式 可以不用就是按钮变丑了而已
  3. }
  4. <html>
  5. <head>
  6.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>Web QR</title>
  9.  
  10.     <style type="text/css">
  11.         body {
  12.             width: 100%;
  13.             text-align: center;
  14.         }
  15.  
  16.         img {
  17.             border: 0;
  18.         }
  19.  
  20.         #main {
  21.             margin: 15px auto;
  22.             background: white;
  23.             overflow: auto;
  24.             width: 100%;
  25.         }
  26.  
  27.         #mainbody {
  28.             background: white;
  29.             width: 100%;
  30.             display: none;
  31.         }
  32.  
  33.         #footer {
  34.             background: white;
  35.         }
  36.  
  37.         #v {
  38.             width: 320px;
  39.             height: 240px;
  40.         }
  41.  
  42.         #qr-canvas {
  43.             display: none;
  44.         }
  45.  
  46.         #qrfile {
  47.             width: 320px;
  48.             height: 240px;
  49.         }
  50.  
  51.         #mp1 {
  52.             text-align: center;
  53.             font-size: 35px;
  54.         }
  55.  
  56.         #imghelp {
  57.             position: relative;
  58.             left: 0px;
  59.             top: -160px;
  60.             z-index: 100;
  61.             font: 18px arial,sans-serif;
  62.             background: #f0f0f0;
  63.             margin-left: 35px;
  64.             margin-right: 35px;
  65.             padding-top: 10px;
  66.             padding-bottom: 10px;
  67.             border-radius: 20px;
  68.         }
  69.  
  70.         .selector {
  71.             margin: 0;
  72.             padding: 0;
  73.             cursor: pointer;
  74.             margin-bottom: -5px;
  75.         }
  76.  
  77.         #outdiv {
  78.             width: 320px;
  79.             height: 240px;
  80.             border: solid;
  81.             border-width: 3px 3px 3px 3px;
  82.         }
  83.  
  84.         #result {
  85.             border: solid;
  86.             border-width: 1px 1px 1px 1px;
  87.             padding: 20px;
  88.             width: 70%;
  89.         }
  90.  
  91.         .tsel {
  92.             padding: 0;
  93.         }
  94.          .fileinput-button {
  95.             position: relative;
  96.             display: none;
  97.         }
  98.  
  99.     </style>
  100.     <script src="~/Content/scripts/weui/barcode/llqrcode.js"></script>
  101.  
  102.     <script src="~/Content/scripts/weui/barcode/webqr.js"></script>
  103. </head>
  104.  
  105. <body >
  106.     <div id="main">
  107.         <div id="mainbody">
  108.             <table class="tsel" border="0" width="100%">
  109.                 <tr>
  110.                     <td valign="top" align="center" width="50%">
  111.                         <table class="tsel" border="0">
  112.                             @*<tr>
  113.                                 <td><img class="selector" id="webcamimg" src="vid.png" onclick="setwebcam()" align="left" /></td>
  114.                                 <td><img class="selector" id="qrimg" src="cam.png" onclick="setimg()" align="right" /></td>
  115.                             </tr>*@
  116.                             <tr>
  117.                                 <td  align="center">
  118.                                     <div id="outdiv">
  119.                                     </div>
  120.                                 </td>
  121.                             </tr>
  122.                             <tr>
  123.                                 <td><a class="weui-btn weui-btn_primary"   href="javascript:void(0);" onclick="setwebcam()" id="btnsaveCharge">相机扫码</a></td>
  124.                             </tr>
  125.                             <tr>
  126.                                 <td><a class="weui-btn weui-btn_primary" href="javascript:void(0);" onclick="setimg()" id="btnsaveCharge">相册识别</a></td>
  127.                             </tr>
  128.                             <tr ><td><div  class="weui-input" id="result"></div></td></tr>
  129.                         </table>
  130.                     </td>
  131.                 </tr>
  132.             </table>
  133.         </div>
  134.     </div>
  135.     <canvas id="qr-canvas" width="800" height="600"></canvas>
  136.     <script type="text/javascript">
  137.  
  138.         load();
  139.         setwebcam();
  140.  
  141.     </script>
  142. </body>
  143.  
  144. </html>

//如果您对具体实现感兴趣可以看看

  1. var gCtx = null;
  2. var gCanvas = null;
  3. var c=0;
  4. var stype=0;
  5. var gUM=false;
  6. var webkit=false;
  7. var moz=false;
  8. var v=null;
  9.  
  10. //隐藏了从相册获取图片的情况
  11. var imghtml = '<div id="qrfile"><canvas id="out-canvas" width="320" height="240"></canvas>' +
  12.     '<div id="imghelp"  style="display:none">' +
  13.       '<span class="fileinput-button"> <input id="picselect" type="file"  onchange="handleFiles(this.files)"  > </span>' +
  14.     '</div>' +
  15. '</div>';
  16.  
  17. var vidhtml = '<video id="v" autoplay></video>';
  18.  
  19. function dragenter(e) {
  20.   e.stopPropagation();
  21.   e.preventDefault();
  22. }
  23.  
  24. function dragover(e) {
  25.   e.stopPropagation();
  26.   e.preventDefault();
  27. }
  28. function drop(e) {
  29.   e.stopPropagation();
  30.   e.preventDefault();
  31.  
  32.   var dt = e.dataTransfer;
  33.   var files = dt.files;
  34.   if(files.length>0)
  35.   {
  36.     handleFiles(files);
  37.   }
  38.   else
  39.   if(dt.getData('URL'))
  40.   {
  41.     qrcode.decode(dt.getData('URL'));
  42.   }
  43. }
  44.  
  45. function handleFiles(f)
  46. {
  47.     var o=[];
  48.  
  49.     for(var i =0;i<f.length;i++)
  50.     {
  51.         var reader = new FileReader();
  52.         reader.onload = (function(theFile) {
  53.         return function(e) {
  54.             gCtx.clearRect(0, 0, gCanvas.width, gCanvas.height);
  55.  
  56.             qrcode.decode(e.target.result);
  57.         };
  58.         })(f[i]);
  59.         reader.readAsDataURL(f[i]);
  60.     }
  61. }
  62.  
  63. function initCanvas(w,h)
  64. {
  65.     gCanvas = document.getElementById("qr-canvas");
  66.     gCanvas.style.width = w + "px";
  67.     gCanvas.style.height = h + "px";
  68.     gCanvas.width = w;
  69.     gCanvas.height = h;
  70.     gCtx = gCanvas.getContext("2d");
  71.     gCtx.clearRect(0, 0, w, h);
  72. }
  73.  
  74. function captureToCanvas() {
  75.     if(stype!=1)
  76.         return;
  77.     if(gUM)
  78.     {
  79.         try{
  80.             gCtx.drawImage(v,0,0);
  81.             try{
  82.                 qrcode.decode();
  83.             }
  84.             catch(e){
  85.                 console.log(e);
  86.                 setTimeout(captureToCanvas, 500);
  87.             };
  88.         }
  89.         catch(e){
  90.                 console.log(e);
  91.                 setTimeout(captureToCanvas, 500);
  92.         };
  93.     }
  94. }
  95.  
  96. function htmlEntities(str) {
  97.     return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  98. }
  99.  
  100. function read(a)
  101. {
  102.  
  103.     alert(a);
  104.  
  105. }    
  106.  
  107. function isCanvasSupported(){
  108.   var elem = document.createElement('canvas');
  109.   return !!(elem.getContext && elem.getContext('2d'));
  110. }
  111. function success(stream)
  112. {
  113.  
  114.     v.srcObject = stream;
  115.     v.play();
  116.  
  117.     gUM=true;
  118.     setTimeout(captureToCanvas, 500);
  119. }
  120.  
  121. function error(error)
  122. {
  123.     gUM=false;
  124.     return;
  125. }
  126.  
  127. function load()
  128. {
  129.     if(isCanvasSupported() && window.File && window.FileReader)
  130.     {
  131.         initCanvas(800, 600);
  132.         qrcode.callback = read;
  133.         document.getElementById("mainbody").style.display="inline";
  134.         setwebcam();
  135.     }
  136.     else
  137.     {
  138.         document.getElementById("mainbody").style.display="inline";
  139.         alert("您当前浏览器不支持扫码,请安装UC浏览器试试!");
  140.     }
  141. }
  142.  
  143. function setwebcam()
  144. {
  145.  
  146.     var options = true;
  147.     if(navigator.mediaDevices && navigator.mediaDevices.enumerateDevices)
  148.     {
  149.         try{
  150.             navigator.mediaDevices.enumerateDevices()
  151.             .then(function(devices) {
  152.               devices.forEach(function(device) {
  153.                 if (device.kind === 'videoinput') {
  154.                   if(device.label.toLowerCase().search("back") >-1)
  155.                     options={'deviceId': {'exact':device.deviceId}, 'facingMode':'environment'} ;
  156.                 }
  157.                 console.log(device.kind + ": " + device.label +" id = " + device.deviceId);
  158.               });
  159.               setwebcam2(options);
  160.             });
  161.         }
  162.         catch(e)
  163.         {
  164.             console.log(e);
  165.         }
  166.     }
  167.     else{
  168.         console.log("no navigator.mediaDevices.enumerateDevices" );
  169.         setwebcam2(options);
  170.     }
  171.  
  172. }
  173.  
  174. function setwebcam2(options)
  175. {
  176.     console.log(options);
  177.     document.getElementById("result").innerHTML="- scanning -";
  178.     if(stype==1)
  179.     {
  180.         setTimeout(captureToCanvas, 500);
  181.         return;
  182.     }
  183.     var n=navigator;
  184.     document.getElementById("outdiv").innerHTML = vidhtml;
  185.     v=document.getElementById("v");
  186.  
  187.     if(n.mediaDevices.getUserMedia)
  188.     {
  189.         n.mediaDevices.getUserMedia({video: options, audio: false}).
  190.             then(function(stream){
  191.                 success(stream);
  192.             }).catch(function(error){
  193.                 error(error)
  194.             });
  195.     }
  196.     else
  197.     if(n.getUserMedia)
  198.     {
  199.         webkit=true;
  200.         n.getUserMedia({video: options, audio: false}, success, error);
  201.     }
  202.     else
  203.     if(n.webkitGetUserMedia)
  204.     {
  205.         webkit=true;
  206.         n.webkitGetUserMedia({video:options, audio: false}, success, error);
  207.     }
  208.  
  209.     stype=1;
  210.     setTimeout(captureToCanvas, 500);
  211. }
  212.  
  213. function setimg()
  214. {
  215.     document.getElementById("result").innerHTML="";
  216.     if(stype==2)
  217.         return;
  218.     document.getElementById("outdiv").innerHTML = imghtml; //绘制选取样式
  219.  
  220.     //这里模拟点击事件
  221.     var fileEle = document.getElementById('picselect');
  222.     if (fileEle) {
  223.         fileEle.click();
  224.     }
  225.  
  226.     var qrfile = document.getElementById("qrfile");
  227.     qrfile.addEventListener("dragenter", dragenter, false);
  228.     qrfile.addEventListener("dragover", dragover, false);
  229.     qrfile.addEventListener("drop", drop, false);
  230.     stype=2;
  231. }

 示例1  ----本地或相册二维码识别结果

示例2   相机扫码识别结果

 需要引用的库请点击附件下载 ↓

附件

源码参考直接右键 :https://files.cnblogs.com/files/benbenfishfish/htmltortf.zip

需要注意的是:

我目前只测试了安卓平台UC浏览器. 其他浏览器未做测试.

html5调用手机本地摄像头和相册识别二维码详细实现过程的更多相关文章

  1. 使用JS调用手机本地摄像头或者相册图片识别二维码/条形码

    接着昨天的需求,不过这次不依赖微信,使用纯js唤醒手机本地摄像头或者选择手机相册图片,识别其中的二维码或者是条形码.昨天,我使用微信扫一扫识别,效果超棒的.不过如果依赖微信的话,又怎么实现呢,这里介绍 ...

  2. python3 树莓派 + usb摄像头 做颜色识别 二维码识别

    今天又啥也没干 我完蛋了哦  就是没办法沉下心来,咋办....还是先来条NLP吧.. 七,凡事必有至少三个解决方法 对事情只有一个方法的人,必陷入困境,因为别无选择. 对事情有两个方法的人也陷入困境, ...

  3. HTML5实现扫描识别二维码/生成二维码

    扫描识别二维码 思路: 1. 操作摄像头,获取图片.HTML5 WEBRTC的navigator.getUserMedia方法去实时获取摄像头资源.  2. 利用canvas使用相关算法分析图片识别图 ...

  4. day111:MoFang:邀请好友流程&生成邀请好友二维码&第三方应用识别二维码&本地编译测试&记录邀请人信息

    目录 1.邀请业务逻辑流程图 2.邀请好友-前端 3.邀请好友-后端接口(生成二维码) 4.前端获取后端生成的二维码 5.前端长按页面,保存图片到相册 6.客户端通过第三方识别微信二维码,服务端提供对 ...

  5. iOS--iOS7摄像头识别二维码功能

    iOS–iOS7摄像头识别二维码功能 属性介绍: AVFoundation 框架基于以下几个类实现图像捕捉 ,通过这些类可以访问来自相机设备的原始数据并控制它的组件. AVCaptureDevice ...

  6. ios 中生成二维码和相册中识别二维码

    iOS 使用CIDetector扫描相册二维码.原生扫描 原生扫描 iOS7之后,AVFoundation让我们终于可以使用原生扫描进行扫码了(二维码与条码皆可)AVFoundation可以让我们从设 ...

  7. 移动端禁止图片长按和vivo手机点击img标签放大图片,禁止长按识别二维码或保存图片【转载】

    移动端禁止图片长按和vivo手机点击img标签放大图片,禁止长按识别二维码或保存图片 img{ pointer-events: none; } 源文地址:https://www.cnblogs.com ...

  8. C# ZXing.Net生成二维码、识别二维码、生成带Logo的二维码（二）

    1.使用ZXint.Net生成带logo的二维码 /// <summary> /// 生成带Logo的二维码 /// </summary> /// <param name ...

  9. winform 扫码识别二维码

    因为公司业务需求,需要在Windows系统下调用摄像头识别二维码需求,就有了这个功能. 我根据网上网友提供的一些资料,自己整合应用到项目中,效果还不错(就是感觉像素不是太好) 现在将调用摄像头+识别二 ...

随机推荐

  1. ibm x3550m4 开启cpu高性能模式

    1.必须进bios里调整,和调整超线程一样,重启服务器按F1进bios界面,选择system settings 2.选择最大性能模式:Operating Modes>Choose Operati ...

  2. java基础23 Math类和Random类

    一.Math数学类 主要是提供很多数学的公式 1.1.Math类的常用方法 abs(int a):绝对值   ceil(double a):向上取整   floor(double a):向下取整   ...

  3. No.10 selenium学习之路之通过元素定位获取属性

    1. implicitly_wait()隐形等待.等待页面加载完成,作用是全局的. 时间可以设置的长,短时间也没有影响.直到设置的时间耗完 时间耗完也不会报错 2.获取title值 driver.ti ...

  4. 静态链接库(lib)、动态链接库(dll)与动态链接库的导入库(lib)

    静态链接库与动态链接库相对应.动态链接库的导入库不同于以上两种库. 1.静态链接库(lib)     程序编译一般需经编辑.编译.连接.加载和运行几个步骤.在我们的应用中,有一些公共代码是需要反复使用 ...

  5. 利用CE手动破解百度云下载限速！

    一步,你需要打开百度云<ignore_js_op> 第二步,你需要用上面附送的工具选择百度云进程<ignore_js_op> 第三点,不多说,看图<ignore_js_o ...

  6. mvn本地库导入jar包

    导入脚本  #!/bin/sh  mvn deploy:deploy-file -DgroupId=com.xxx.xxx -DartifactId=包名 -Dversion=4.0 -Dpackag ...

  7. iOS图片缓存

    iOS的内存管理始终是开发者面临的大问题,内存占用过大时,很容易会被系统kill掉,开发者需要尽可能的优化内存占用问题. 现在的App界面做的越来越精致,里面集成了大量的图片,笔者首先想到的就是如何减 ...

  8. 使用CSS3 @media 设置页面自适应

    参考CSS3 @media 查询 如果文档宽度小于 300 像素则修改背景演示(background-color): @media screen and (max-width: 300px) { bo ...

  9. javascript输入验证数字方法，适合充值时输入正整数验证

    说明:用于验证正整数的输入,不允许输入其他字符. html: <input type="text" id="sell_jobNum" name=" ...

  10. USACO 5.1 Musical Themes（哈希+二分）

    Musical ThemesBrian Dean A musical melody is represented as a sequence of N (1 <= N <= 5000) n ...