Home >Web Front-end >HTML Tutorial >MUI framework uses HTML5 to implement QR code scanning function
1. Introduction
The Barcode module manages barcode scanning and provides scanning and identification functions for common barcodes (QR codes and one-dimensional codes). It can call the device's camera to scan barcode images for data input. Barcode management objects can be obtained through plus.barcode.
2. The effect of implementation
3. The implementation code
<!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" />
<link href="css/mui.min.css" rel="stylesheet" />
<script src="js/mui.min.js"></script>
<style type="text/css">
#bcid{
width: 100%;
height: 100%;
position: absolute;
background: #000000;
}
html, body ,p{
height:100%;
width: 100%;
}
.fbt{
color: #0E76E1;
width: 50%;
background-color: #ffffff;
float: left;
line-height: 44px;
text-align: center;
}
</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>
<p id="bcid">
<!--盛放扫描控件的p-->
</p>
<p class="mui-bar mui-bar-footer" style="padding: 0px;">
<p class="fbt" onclick="scanPicture();">从相册选择二维码</p>
<p class="fbt mui-action-back">取 消</p>
</p>
<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 );
};
// 从相册中选择二维码图片
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);
});
}
</script>
</body>
</html>
3. The problems encountered during the process
a, p occupies the entire page
1. The width and height of this p are 100%, and the height of the parent element is also the same (and so on until the root node), or the position of this p is absolute;
2. You can use js to dynamically set the page width and height
var height = window.innerHeight + 'px';//获取页面实际高度
var width = window.innerWidth + 'px';
document.getElementById("bcid").style.height= height;
document.getElementById("bcid").style.width= width;
b. The scanning control has upper and lower margins.
Use black filling to dilute the visual difference, which has not been solved in practice. , (If you solve it, please leave a message, thank you)
Related recommendations:
HTML5 hybrid development QR code scanning and calling local camera example tutorial
H5 code example for making QR code scanning and parsing
Html5 implements QR code scanning and parsing_html5 tutorial skills
The above is the detailed content of MUI framework uses HTML5 to implement QR code scanning function. For more information, please follow other related articles on the PHP Chinese website!