바코드 구현 사례
1. 소개바코드 모듈은 바코드 스캐닝을 관리하고 일반 바코드(QR 코드 및 1차원 코드)에 대한 스캐닝 및 식별 기능을 제공하여 데이터 입력을 위한 바코드 이미지를 스캔하도록 장치의 카메라를 호출할 수 있습니다. 바코드 관리 객체는 plus.barcode를 통해 얻을 수 있습니다.
2. 효과 달성 3. 코드 구현 <!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{ 너비: 100%; 높이: 100%; 위치: 절대값: #000000 } html, body ,div { 높이:100%; 너비: 100% } .fbt{ 색상: #0E76E1; 배경색: #ffffff; 왼쪽; 줄 높이: 44px; 텍스트 정렬: } </style> </head> <body> <header class=mui-bar-nav 스타일=배경색: ffffff;> <a class=mui-action-back mui-icon mui-icon-left-nav mui-pull-left></a> <h1 class=mui-title style=color: #0E76E1;>아이템 QR 코드 스캔</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();>앨범에서 QR 코드 선택</div> <div class=fbt mui-action-back>취소</div> </div> <script type=text/javascript> 스캔 = null; //스캔 객체 mui.plusReady(function () { mui.init(); startRecognize(); }) function startRecognize(){ try{ var filter; 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){ 경고(오류가 발생했습니다:/n+e) } }; onmarked( 유형, 결과 ) { var text = ''; switch(type){ case plus.barcode.QR: text = 'QR: '; break; case plus.barcode.EAN13: text = 'EAN13: '; case plus.barcode.EAN8: text = 'EAN8: '; break; } Alert( text + : + result ) } // 앨범 함수에서 QR 코드 사진을 선택합니다() { plus.gallery.pick(function(path){ plus.barcode.scan(path,onmarked,function(error){ plus.nativeUI.alert(이 이미지를 인식할 수 없습니다.); }); },function(err){ plus .nativeUI.alert(실패: +err.message) }); 3. 진행과정에서 발생한 문제a, div가 전체 페이지를 차지합니다.
1. 이 div의 너비와 높이는 100%이고 상위 요소의 높이도 이것입니다(루트 노드까지 계속). 또는 이 div의 위치는 절대값입니다.
2. js를 사용하여 페이지 너비와 높이를 동적으로 설정할 수 있습니다.
var height = window.innerHeight + 'px';//페이지의 실제 높이 가져오기 var width = window.innerWidth + 'px'; document.getElementById(bcid).style.height= document.getElementById(bcid) .style.너비= 너비;
b, 스캔 컨트롤에는 위쪽 및 아래쪽 여백이 있습니다.
검정색으로 채우기는 시각적인 차이를 희석시키기 위해 사용되었으나 실제로는 해결되지 않았습니다. (해결하신 경우 메시지를 남겨주세요. 감사합니다.)
요약위 내용은 에디터가 소개한 MUI 프레임워크를 기반으로 HTML5로 구현한 QR 코드 스캔 기능입니다. 궁금한 점이 있으시면 메시지를 남겨주시면 에디터가 시간 맞춰 답변해 드리겠습니다. . 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!