html5调用手机本地摄像头和相册识别二维码详细实现过程(附源码下载)

https://www.cnblogs.com/benbenfishfish/p/9674197.html

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

附件

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

html5调用手机本地摄像头和相册识别二维码详细实现过程(附源码下载)
项目中有用到h5识别我们的单据,单据上面有二维码. 实现的场景就是业务人员扫码类似以下场景

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

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

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

</head>

@**@



相机扫码
相册识别

</body>

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

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<f.length;i++)
{
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
gCtx.clearRect(0, 0, gCanvas.width, gCanvas.height);

qrcode.decode(e.target.result);
};
})(f[i]);
reader.readAsDataURL(f[i]);
}
}

function initCanvas(w,h)
{
gCanvas = document.getElementById("qr-canvas");
gCanvas.style.width = w + "px";
gCanvas.style.height = h + "px";
gCanvas.width = w;
gCanvas.height = h;
gCtx = gCanvas.getContext("2d");
gCtx.clearRect(0, 0, w, h);
}

function htmlEntities(str) {
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/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 setwebcam()
{

}

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;
}

posted @ 2022-01-07 16:51 乌卡拉卡阅读(2178) 评论(0) 收藏举报

刷新页面返回顶部

html5调用手机本地摄像头和相册识别二维码详细实现过程(附源码下载)

公告