오늘 상사가 나에게 하이브리드 개발을 사용하고 H5를 사용하여 로컬 카메라를 호출하여 QR 코드를 스캔해야 한다고 요청했습니다. 이전에는 주로 zxing 플러그인을 호출하여 기본 Android QR 코드 스캔을 수행했습니다. 플래시도 받았습니다. 하지만 순수 H5를 본 적이 없어서 어떻게 해야 할지 몰라 밤에 집에 가서 온라인으로 솔루션을 찾기 시작했습니다. 다음은 H5 스캔 QR에 대한 이해와 코드입니다. 코드 및 로컬 카메라 호출.
인기 있는 과학 웹사이트:
H5가 Android 구성요소 객체를 생성하는 방법
H5는 Android 로컬 카메라 API를 호출합니다.
온라인 QR 코드 이미지 생성기
QR 코드 스캔: (mui 프레임워크를 사용하여 다음은 html 코드입니다.)
<!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 style=> mui-action-back mui-icon mui-icon-left-nav mui-pull-left></a> <h1 class=mui-title style=color: #0E76E1;>H5webapp 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> var height = window.innerHeight + 'px';//페이지의 실제 높이 가져오기 var width = window.innerWidth + 'px'; document.getElementById(bcid).style.height= height; document.getElementById(bcid).style.width= width; scan = null;//객체 스캔 mui.plusReady(function () { //mui를 통해 스캔을 초기화합니다. init(); startRecognize(); }); function startRecognize(){ //스캔 켜기 try{ var filter; //맞춤형 스캐닝 제어 스타일 var styles = #29E52C,scanbarColor: #29E52C,배경: } //스캔 제어 구성 scan = new plus.barcode.Barcode('bcid',filter,styles); scan.onmarked = onmarked; //스캔 오류 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) } }; //오류 팝업 경고(e); }; function onmarked( type, result ) { //QR 코드 스캔을 위한 콜백 함수입니다. type은 QR 코드 스캔을 위한 콜백 유형입니다. var text = ''; (type ){ //QR, EAN13, EAN8은 모두 QR 코드의 인코딩 형식이며 결과는 반환된 결과입니다. case plus.barcode.QR: text = 'QR: '; 텍스트 = 'EAN13: '; break; case plus.barcode.EAN8: text = 'EAN8: '; break; } Alert( text + : + result ) }; // 앨범 함수에서 QR 코드 사진 선택 QR 코드 이미지 직접 식별 plus.gallery.pick(function(path){ plus.barcode.scan(path,onmarked,function(error){ plus.nativeUI.alert(Unable to recognition this image); }); },function(err){ plus.nativeUI.alert(실패: +err.message) }) </script> </body> </html>다음은 패키지 구조입니다. 개발 도구는 hbuilder입니다.
mui.plusReady 함수는 주로 초기화를 위한 것입니다.
startRecognize()는 QR 코드 스캔 기능을 활성화하는 것입니다.
onerror는 오류 메시지입니다.
onmarked가 핵심으로 QR코드 스캔 후의 콜백 함수, type은 QR코드 인식 방식, 결과는 QR코드 콜백 내용입니다.scanPicture()는 로컬 QR 코드 사진을 직접 식별하고 분석할 수 있습니다.
H5가 로컬 카메라를 호출합니다.
<!DOCTYPE html><html><head> <meta charset=utf-8> <meta name=viewport content=width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1, user-scalable=no /> <title></title> <script src=js/mui.min.js></script> <link href=css/mui.min.css rel=stylesheet/> <script type=text/javascript charset=utf-8> document.addEventListener( plusready, function(){ mui.init(); }) function getCamera() { var cam = plus.camera.getCamera(); //문자열 배열, 카메라가 지원하는 카메라 해상도 var Resolutions = cam.supportedImageResolutions[0]; //문자열 배열, 카메라가 지원하는 사진 파일 형식 var Formats = cam.supportedImageFormats[0] //사진 메소드 호출 //capturedFile, 사진 완료 후 사진 저장 주소 cam .captureImage( function(capturedfile){ //사진 촬영 성공 Alert(capturedfile); //인쇄}, function(){ //사진 촬영 실패},{ //사진 매개변수 형식: 형식, 인덱스: 1//1은 기본 카메라를 나타내고, 2는 보조 카메라를 나타냅니다.}); var Resolutions = cam.supportedImageResolutions[0]; //문자열 배열, 카메라가 지원하는 사진 파일 형식 var Formats = cam.supportedImageFormats[ 0] ; //사진 촬영 메소드 호출 //capturedFile. 사진 촬영이 완료된 후 사진 저장 주소 cam.captureImage(function(capturedFile){ //사진 촬영 성공 Alert(capturedFile); //인쇄 //시스템 메소드를 호출하여 사진 주소에 따라 사진 가져오기 plus.io.resolvLocalFileSystemURL(capturedFile, //콜백 함수 성공 //파일 관련 정보 입력 함수( 항목){ var img = document.createElement(img); img.src =entry.toLocalURL(); document.documentElement.appendChild(img); },function(){ //콜백 함수 실패}) }) } </script></head><body> <button onclick=getCamera()>사진</button></body></html >mui.init()는 mui 프레임워크 초기화입니다.
getCamera() 메소드는 먼저 카메라 객체를 생성한 후 사진을 촬영하고, 사진 촬영 후 생성된 이미지 경로를 인쇄합니다.
요약위 내용은 에디터가 소개한 HTML5 하이브리드 개발용 QR코드 스캔 및 로컬 카메라 호출입니다. 궁금한 점이 있으시면 메시지를 남겨주시면 에디터가 시간 맞춰 답변해 드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!