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

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

 

 

 

 

 

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

@{    Layout = "~/Views/Shared/_MForm.cshtml";// 这里是weui的样式 可以不用就是按钮变丑了而已}    
         
                             
     
        
      
            
       
 
           
             @*
*@ 
            
             
               
               
              
             
               
 
               
 
               
 
              
              
               
相机扫码
              
              
               
相册识别
              
              
              
               
             
             
           
 
        
      
    
     
    
         

 

 

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

var gCtx = null;var gCanvas = null;var c=0;var stype=0;var gUM=false;var webkit=false;var moz=false;var v=null; //隐藏了从相册获取图片的情况var imghtml = '
     
      ' +    '
      
       ' +      '
         ' +    '
      
' +'
     
';var vidhtml = '
     ';function dragenter(e) {  e.stopPropagation();  e.preventDefault();}function dragover(e) {  e.stopPropagation();  e.preventDefault();}function drop(e) {  e.stopPropagation();  e.preventDefault();  var dt = e.dataTransfer;  var files = dt.files;  if(files.length>0)  {    handleFiles(files);  }  else  if(dt.getData('URL'))  {    qrcode.decode(dt.getData('URL'));  }}function handleFiles(f){    var o=[];        for(var i =0;i
     
      /g, '>').replace(/"/g, '"');}function read(a){    alert(a);}    function isCanvasSupported(){  var elem = document.createElement('canvas');  return !!(elem.getContext && elem.getContext('2d'));}function success(stream) {    v.srcObject = stream;    v.play();    gUM=true;    setTimeout(captureToCanvas, 500);}        function error(error){    gUM=false;    return;}function load(){    if(isCanvasSupported() && window.File && window.FileReader)    {        initCanvas(800, 600);        qrcode.callback = read;        document.getElementById("mainbody").style.display="inline";        setwebcam();    }    else    {        document.getElementById("mainbody").style.display="inline";        alert("您当前浏览器不支持扫码,请安装UC浏览器试试!");    }}function setwebcam(){        var options = true;    if(navigator.mediaDevices && navigator.mediaDevices.enumerateDevices)    {        try{            navigator.mediaDevices.enumerateDevices()            .then(function(devices) {              devices.forEach(function(device) {                if (device.kind === 'videoinput') {                  if(device.label.toLowerCase().search("back") >-1)                    options={'deviceId': {'exact':device.deviceId}, 'facingMode':'environment'} ;                }                console.log(device.kind + ": " + device.label +" id = " + device.deviceId);              });              setwebcam2(options);            });        }        catch(e)        {            console.log(e);        }    }    else{        console.log("no navigator.mediaDevices.enumerateDevices" );        setwebcam2(options);    }    }function setwebcam2(options){    console.log(options);    document.getElementById("result").innerHTML="- scanning -";    if(stype==1)    {        setTimeout(captureToCanvas, 500);            return;    }    var n=navigator;    document.getElementById("outdiv").innerHTML = vidhtml;    v=document.getElementById("v");    if(n.mediaDevices.getUserMedia)    {        n.mediaDevices.getUserMedia({video: options, audio: false}).            then(function(stream){                success(stream);            }).catch(function(error){                error(error)            });    }    else    if(n.getUserMedia)    {        webkit=true;        n.getUserMedia({video: options, audio: false}, success, error);    }    else    if(n.webkitGetUserMedia)    {        webkit=true;        n.webkitGetUserMedia({video:options, audio: false}, success, error);    }     stype=1;    setTimeout(captureToCanvas, 500);}function setimg(){    document.getElementById("result").innerHTML="";    if(stype==2)        return;    document.getElementById("outdiv").innerHTML = imghtml; //绘制选取样式     //这里模拟点击事件    var fileEle = document.getElementById('picselect');    if (fileEle) {        fileEle.click();    }    var qrfile = document.getElementById("qrfile");    qrfile.addEventListener("dragenter", dragenter, false);      qrfile.addEventListener("dragover", dragover, false);      qrfile.addEventListener("drop", drop, false);    stype=2;}
     

 

 

 

 

 

 

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

 

 

示例2   相机扫码识别结果

 

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

 或直接右键 :https://files.cnblogs.com/files/benbenfishfish/htmltortf.zip

 

 

 

 

需要注意的是:

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