An implementation case of Barcode
1. IntroductionThe 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. Effect achieved 3. Implement the 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 ,div { 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;>Item QR code scanning</h1> <span class=mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right id=turnTheLight></span> </header> <div id =bcid> <!--div holding the scan control--> </div> <div class=mui-bar mui-bar-footer style=padding: 0px;> <div class=fbt onclick=scanPicture();>Select QR code from album</div> <div class=fbt mui-action-back>Cancel</div> </div> <script type=text/javascript> scan = null; //Scan object mui.plusReady(function () { mui.init(); startRecognize(); }); function startRecognize(){ try{ var filter; //Customized scan control style var styles = {frameColor: #29E52C,scanbarColor: #29E52C,background: } //Scan control construction scan = new plus.barcode.Barcode('bcid',filter,styles); scan.onmarked = onmarked; scan.onerror = onerror ; scan.start(); //Turn on and off flash processing 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(An error occurred:/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 ); }; // Select a QR code picture from the album function scanPicture() { plus.gallery.pick(function(path){ plus.barcode.scan(path,onmarked,function(error){ plus.nativeUI.alert(This image cannot be recognized); }); },function(err){ plus. nativeUI.alert(Failed: +err.message); }); } </script> </body> </html> 3. Problems encountered during the processa, div takes up the entire page
1. The width and height of this div are 100%, and the height of the parent element is also this (and so on until the root node), or the position of this div is absolute;
2. You can use js to dynamically set the page width and height.
var height = window.innerHeight + 'px';//Get the actual height of the page var width = window.innerWidth + 'px'; document.getElementById(bcid).style.height= height; document.getElementById(bcid).style. width= width;
b, the scan control has upper and lower margins
Filling with black is used to dilute the visual difference, but it has not been actually solved. (If you solve it, please leave a message, thank you)
SummarizeThe above is the QR code scanning function implemented by HTML5 based on the MUI framework introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!