Heute hat mir mein Vorgesetzter eine Anfrage gestellt und gesagt, dass ich die Hybridentwicklung verwenden und H5 verwenden muss, um die lokale Kamera zum Scannen des QR-Codes aufzurufen. Ich habe zuvor natives Android-QR-Code-Scannen durchgeführt, hauptsächlich durch Aufrufen des ZXING-Plug-Ins. Ich habe auch einen Blitz bekommen, aber ich war noch nie auf einen reinen H5 gestoßen, also wusste ich nicht, was ich tun sollte, also ging ich nachts nach Hause und begann online nach Lösungen zu suchen. Das Folgende ist mein Verständnis und Code für das H5-Scannen von QR Codes und Aufruf lokaler Kameras.
Populärwissenschaftliche Website:
Wie H5 Android-Komponentenobjekte generiert
H5 ruft die lokale Android-Kamera-API auf
Online-QR-Code-Bildgenerator
QR-Code-Scannen: (unter Verwendung des Mui-Frameworks ist das Folgende der HTML-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 % } html, body ,div { height:100%; width: 100% } .fbt{ width: 50%; #ffffff; float: left; line-height: 44px; text-align: center } </style> </head> <body> <header class=mui-bar-nav style=> <a class= mui-action-back mui-icon mui-icon-left-nav mui-pull-left></a> <h1 class=mui-title style=color: #0E76E1;>H5webapp QR-Code-Scanning</h1> <span class=mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right id=turnTheLight></span> </header> <div id = bcid> <!--Das Div, das die Scan-Steuerung hält--> </div> <div class=mui-bar mui-bar-footer style=padding: 0px;> <div class=fbt onclick=scanPicture();>QR-Code aus Album auswählen</div> <div class=fbt mui-action-back>Abbrechen</div> </div> <script type=text / javascript> var height = window.innerHeight + 'px';//Ermitteln Sie die tatsächliche Höhe der Seite var width = window.innerWidth + 'px'; document.getElementById(bcid).style.height= height; document.getElementById(bcid).style.width= width; scan = null;//Objekt scannen mui.plusReady(function () { //Scan mui durch mui initialisieren. init(); startRecognize(); }); function startRecognize(){ //Angepasster Scan-Steuerungsstil var style; #29E52C,scanbarColor: #29E52C,background: } //Scan-Kontrollaufbau scan = new plus.barcode.Barcode('bcid',filter,styles); scan.onmarked = onmarked; //Scan-Fehler scan.start(); //Flash-Verarbeitung ein- und ausschalten 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){ warning(Ein Fehler ist aufgetreten:/n+e){ //Fehler-Popup-Alarm(e); }; function onmarked( type, result) { //Dies ist die Rückruffunktion zum Scannen des QR-Codes, Typ ist der Rückruftyp zum Scannen des QR-Codes var text = ''; (Typ){ //QR, EAN13 und EAN8 sind alle Kodierungsformate von QR-Codes, und das Ergebnis ist das zurückgegebene Ergebnis case plus.barcode.QR: text = 'QR: '; text = 'EAN13: '; break; case plus.barcode.EAN8: text = 'EAN8: '; break } warning( text + : + result }; QR-Code-Bilder direkt identifizieren plus.gallery.pick(function(path){ plus.barcode.scan(path,onmarked,function(error){ plus.nativeUI.alert(Dieses Bild wurde nicht erkannt); }); },function(err){ plus.nativeUI.alert(Failed: +err.message });Das Folgende ist die Paketstruktur: Das Entwicklungstool ist hbuilder
Die Funktion mui.plusReady dient hauptsächlich der Initialisierung
startRecognize() dient dazu, die Funktion zum Scannen von QR-Codes zu aktivieren
onerror ist eine Fehlermeldung
onmarked ist der entscheidende Punkt, es ist die Rückruffunktion nach dem Scannen des QR-Codes, type ist der QR-Code-Erkennungstyp und result ist der Inhalt des QR-Code-Rückrufs.scanPicture() kann lokale QR-Code-Bilder direkt identifizieren und analysieren
H5 ruft lokale Kamera an
<!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(); }); { var cam = plus.camera.getCamera(); //String-Array, von der Kamera unterstützte Kameraauflösung var Resolutions = cam.supportedImageResolutions[0]; //String-Array, von der Kamera unterstützte Fotodateiformate = cam.supportedImageFormats[0]; //Rufen Sie die Fotomethode auf //capturedFile, nachdem das Foto fertig ist, die Fotospeicheradresse cam .captureImage( function(capturedfile){ //Fotografie erfolgreich Alert(capturedfile); //Drucken}, function(){ //Fotografie fehlgeschlagen},{ //Format der Fotografieparameter: Formate, Index: 1//1 stellt die Hauptkamera dar, 2 stellt die Hilfskamera dar}); var Resolutions = cam.supportedImageResolutions[0] //String-Array, von der Kamera unterstütztes Fotodateiformat var Formats = cam.supportedImageFormats[ 0] ; //Aufrufen der Fotomethode //capturedFile Nach Abschluss der Fotografie wird die Fotospeicheradresse cam.captureImage(function(capturedFile){ //Foto erfolgreich aufgenommen alarm(capturedFile); //Drucken Sie es //Rufen Sie die Systemmethode auf, um das Foto entsprechend der Fotoadresse abzurufen plus.io.resolvLocalFileSystemURL(capturedFile, //Erfolgreiche Rückruffunktion //Eingabedateibezogene Informationsfunktion( Eintrag){ var img = document.createElement(img); img.src = enter.toLocalURL(); document.documentElement.appendChild(img); },function(){ //Fehlgeschlagene Rückruffunktion}); } </script></head><body> <button onclick=getCamera()>Photography</button></body></html >mui.init(); ist die Initialisierung des Mui-Frameworks
Die Methode getCamera() generiert zunächst ein Kameraobjekt, nimmt dann ein Foto auf und druckt nach der Aufnahme des Fotos den generierten Bildpfad aus.
ZusammenfassenDas Obige ist das vom Herausgeber eingeführte HTML5-Hybrid-QR-Code-Scannen und Aufrufen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!