<!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" />
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" src="js/llqrcode.js"></script>
<style type="text/css">
#bcid {
width: 100%;
height: 86%;
margin-top: 45px;
position: absolute;
background: #000000;
}
.fbt {
color: #0E76E1;
width: 50%;
background-color: #ffffff;
float: left;
line-height: 44px;
text-align: center;
}
#outdiv {
width: 320px;
height: 240px;
border: solid;
border-width: 3px 3px 3px 3px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav" style="background-color: #ffffff;">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title" style="color: #0E76E1;">物品二维码扫描</h1>
<span class="mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right" id="turnTheLight"></span>
</header>
<div id="bcid">
<!--盛放扫描控件的div-->
</div>
<div class="mui-bar mui-bar-footer" style="padding: 0px;">
<div class="fbt" onclick="scanPicture();">从相册选择二维码</div>
<div class="fbt mui-action-back">取 消</div>
</div>
<div align="center" style="display: none;">
<div id="outdiv">
</div>
</div>
<canvas id="qr-canvas" width="800" height="600"></canvas>
<script type="text/javascript">
scan = null; //扫描对象
mui.plusReady(function() {
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) {
var text = '';
switch(type) {
case plus.barcode.QR:
text = 'QR: ';
break;
case plus.barcode.EAN13:
text = 'EAN13: ';
break;
case plus.barcode.EAN8:
text = 'EAN8: ';
break;
}
alert(text + " : " + result);
};
</script>
<script type="text/javascript">
load();
var gCtx = null;
var gCanvas = null;
var c = 0;
var stype = 0;
var gUM = false;
var webkit = false;
var moz = false;
var v = null;
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) {
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 captureToCanvas() {
if(stype != 1)
return;
if(gUM) {
try {
gCtx.drawImage(v, 0, 0);
try {
qrcode.decode();
} catch(e) {
console.log(e);
setTimeout(captureToCanvas, 500);
};
} catch(e) {
console.log(e);
setTimeout(captureToCanvas, 500);
};
}
}
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 load() {
if(isCanvasSupported() && window.File && window.FileReader) {
initCanvas(800, 600);
qrcode.callback = read;
} else {
alert("您当前浏览器不支持扫码!");
}
}
function scanPicture() {
//隐藏了从相册获取图片的情况
var imghtml = '<div id="qrfile"><canvas id="out-canvas" width="320" height="240"></canvas>' +
'<div id="imghelp" style="display:none">' +
'<span class="fileinput-button"> <input id="picselect" type="file" onchange="handleFiles(this.files)" > </span>' +
'</div>' +
'</div>';
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;
}
</script>
</body>
</html>
ScanDemo.zip （11个子文件） 
ScanDemo fonts 
mui.ttf 29KB js llqrcode.js 59KB mui.js 257KB mui.min.js 121KB css mui.min.css 74KB mui.css 95KB .project 2KB
index.html 6KB unpackage .dependencies 4B release .confirmed_dependencies 64B manifest.json 8KB资源评论
xp168971682020-03-05运行有问题
weixin_434642372019-07-17很实用，棒棒的
bear_依旧。
- 粉丝: 11
- 资源: 2
最新资源
- 使用 HTML 和 CSS 实现绚丽的节日烟花效果
- html/css/javascript实现简单的圣诞快乐demo
- 全志V3s GPIO驱动示例（传统设备驱动模型、平台总线设备驱动模型、设备树驱动模型）
- 基于pytho的turtle库实现的圣诞快乐demo
- 【深度学习系列专栏】ch01配套资源
- yolov4 - tiny 900张图片训练效果3
- 连接服务器的服务，可以电脑直连后获得服务器信息
- Vue.js 2.0 入门Demo文档步骤梳理
- 用JavaScript实现文字上下浮动效果
- 用python的turtle库实现新年快乐demo
- Parallels Desktop Activation Tool
- 用java是swing库实现新年快乐动效demo
- mingw资源包wenjian
- 华为汽车产品知识 外呼邀约需要注意什么
- LABVIEW程序实例-cp2_ex10.zip
- LABVIEW程序实例-chart接受的数据类型.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
