基于MUI框架的HTML5+的二维码扫描实现
生活随笔
收集整理的這篇文章主要介紹了
基于MUI框架的HTML5+的二维码扫描实现
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
Barcode的一個(gè)實(shí)現(xiàn)案例
一、簡介
? ? ? ? Barcode模塊管理?xiàng)l碼掃描，提供常見的條碼（二維碼及一維碼）的掃描識(shí)別功能，可調(diào)用設(shè)備的攝像頭對(duì)條碼圖片掃描進(jìn)行數(shù)據(jù)輸入。通過plus.barcode可獲取條碼碼管理對(duì)象。
二、實(shí)現(xiàn)的效果
三、實(shí)現(xiàn) 代碼
[html]?view plaincopy <!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;">物品二維碼掃描</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();">從相冊(cè)選擇二維碼</div>?? ????????<div?class="fbt?mui-action-back">取 ?消</div>?? ????</div>?? ?????????? ????<script?type="text/javascript">?? ???????????scan?=?null;//掃描對(duì)象?? ????????mui.plusReady(function?()?{?? ??????????????mui.init();?? ??????????startRecognize();?? ???????????});?? ?????????????? ????????function?startRecognize(){?? ???????????try{?? ??????????????var?filter;?? ?????????????//自定義的掃描控件樣式?? ?????????????var?styles?=?{frameColor:?"#29E52C",scanbarColor:?"#29E52C",background:?""}?? ????????????//掃描控件構(gòu)造?? ????????????scan?=?new?plus.barcode.Barcode('bcid',filter,styles);?? ????????????scan.onmarked?=?onmarked;??? ????????????scan.onerror?=?onerror;?? ????????????scan.start();?? ????????????//打開關(guān)閉閃光燈處理?? ????????????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("出現(xiàn)錯(cuò)誤啦:\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?);?? ?????????????????????? ????????????};???? ?????????????????? ????????//?從相冊(cè)中選擇二維碼圖片??? ????????function?scanPicture()?{?? ????????????plus.gallery.pick(function(path){?? ????????????????plus.barcode.scan(path,onmarked,function(error){?? ????????????????????plus.nativeUI.alert(?"無法識(shí)別此圖片"?);?? ????????????????});?? ????????????},function(err){?? ????????????????plus.nativeUI.alert("Failed:?"+err.message);?? ????????????});?? ????????}????????? ?????????????????? ????????</script>?? ????</body>?? </html>??
三、做的過程中遇見的問題
? ?a，div占滿整個(gè)頁面 ? ? ? ?1，此div寬高都為100%，父級(jí)元素的高度也為此(依次類推直至根節(jié)點(diǎn))，或者此div的position為absolute; ? ? ? ?2，可采用js動(dòng)態(tài)設(shè)置頁面寬高 [html]?view plaincopy var?height?=?window.innerHeight?+?'px';//獲取頁面實(shí)際高度?? var?width?=?window.innerWidth?+?'px';?? document.getElementById("bcid").style.height=?height;?? document.getElementById("bcid").style.width=?width; ?
二、實(shí)現(xiàn)的效果
三、實(shí)現(xiàn) 代碼
[html]?view plaincopy
三、做的過程中遇見的問題
? ?a，div占滿整個(gè)頁面 ? ? ? ?1，此div寬高都為100%，父級(jí)元素的高度也為此(依次類推直至根節(jié)點(diǎn))，或者此div的position為absolute; ? ? ? ?2，可采用js動(dòng)態(tài)設(shè)置頁面寬高 [html]?view plaincopy
總結(jié)
以上是生活随笔為你收集整理的基于MUI框架的HTML5+的二维码扫描实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 网传杭州3月1号取消限行？ 假的！是Ch
- 下一篇： 碳中和交易所是什么