Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > H5-Tutorial > Html5 implementiert QR-Code-Scan- und Parsing-_HTML5-Tutorial-Fähigkeiten

Html5 implementiert QR-Code-Scan- und Parsing-_HTML5-Tutorial-Fähigkeiten

WBOY
Freigeben： 2016-05-16 15:46:07
Original
2989 Leute haben es durchsucht

Einführung:
Vor kurzem gibt es eine Anforderung für ein Unternehmensprojekt. Im Weibo-Client kann eine Schaltfläche auf der h5-Seite mit Native interagieren, um die Kamera aufzurufen, den QR-Code zu scannen und zu analysieren. Rufen Sie in Nicht-Weibo-Clients (WeChat oder native Browser wie Safari) die Schaltfläche „Foto“ oder „Bild hochladen“ des Systems auf und analysieren Sie den QR-Code, indem Sie ein Foto aufnehmen oder ein Bild hochladen.
Die zweite Lösung erfordert das Parsen des QR-Codes in Front-End-JS. Dies basiert auf der Parsing-Bibliothek jsqrcode eines Drittanbieters. Diese Bibliothek unterstützt bereits den Vorgang des Aufrufs der Kamera auf der Browserseite, basiert jedoch auf einer Eigenschaft namens getUserMedia. Mobile Browser unterstützen dieses Attribut nicht sehr gut, sodass der QR-Code nur indirekt durch das Hochladen von Bildern geparst werden kann.
GetUserMedia-Attribut-kompatible Browserliste:

Zunächst möchte ich dem Entwickler von jsqrcode für die Bereitstellung eines so hervorragenden Codes zum Parsen von QR-Codes danken, der meinen Arbeitsaufwand erheblich reduziert hat. jsqrcode-Adresse: Klicken Sie auf mich
Meine Code-Bibliotheksadresse: Klicken Sie auf mich
1. Probleme gelöst:
1 Der Client ruft die Kamera auf, um den QR-Code zu scannen und zu analysieren.

2 >Die Webseite oder die h5-Seite kann die Arbeit des Scannens des QR-Codes direkt abschließen. 3. Nachteile:

Das Bild ist nicht klar und es kann leicht zu Fehlern bei der Analyse (Aufnahme von Bildern) kommen Um das Bild zu scannen, muss das Objektiv vom QR-Code entfernt sein (sehr geringer Abstand). Im Vergleich zur nativen Anrufkameraanalyse kommt es zu einer Verzögerung von 1 bis 2 Sekunden. Hinweis:

Dieses Plug-in muss mit zepto.js oder jQuery.js verwendet werden Gebrauchsanweisung:

1 . Wo Sie es verwenden müssen Die Seite importiert die js-Dateien in das lib-Verzeichnis in der folgenden Reihenfolge


Kopieren Sie den Code
Der Code lautet wie folgt:




2. Passen Sie den HTML-Stil der Schaltfläche an
Da das Plug-in verwenden muss, ist für die HTML-Struktur ein fester Anzeigestil aktiviert Um den Schaltflächenstil anzupassen, können wir den Code gemäß der folgenden Beispielcodestruktur verschachteln:




Kopieren Sie den Code

Der Code lautet wie folgt:
QR-Code 1 scannen
Dann legen Sie das CSS der Eingabe fest Schaltfläche zum Ausblenden der Schaltfläche, zum Beispiel verwende ich das Attribut Selector




Code kopieren


Der Code lautet wie folgt:
input[node-type=jsbridge ]{ visibility: versteckt; }
Hier müssen wir nur den Stil von class="qr" definieren -btn“ entsprechend unseren eigenen Bedürfnissen.

3. Initialisieren Sie das Qrcode-Objekt auf der Seite




Kopieren Sie den Code

Der Code lautet wie folgt:
//Initialisieren Sie die Schaltfläche zum Scannen des QR-Codes und übergeben Sie das benutzerdefinierte Knotentypattribut$(function() { Qrcode.init($('[ node-type= jsbridge]')); });

Hauptcode-Analyse



Code kopieren



Der Code lautet wie folgt:


(function($) {
var Qrcode = function(tempBtn) {
//Dieses Objekt unterstützt nur das Parsen unter der Weibo-Domäne, was bedeutet, dass es nicht nur für Seiten unter Weibo gilt Die zweite Lösung kann zum Parsen des QR-Codes verwendet werden:
if (window.WeiboJSBridge) {
$(tempBtn).on('click', this.weiBoBridge); >$( tempBtn).on('change', this.getImgFile);
}
};
Qrcode.prototype = {
weiBoBridge: function() {
WeiboJSBridge.invoke( 'scanQRCode', null, function(params) {
//Erhalten Sie das Ergebnis des Scannens des QR-Codes
location.href=params.result;
getImgFile : function() {
var _this_ = this;
var imgFile = $(this)[0].files; ;
var rFilter = /^(?:image/bmp|image/cis-cod|image/gif|image/ief|image/jpeg|image/jpeg|image/jpeg|image/pipeg|image/png| image/svg xml|image /tiff|image/x-cmu-raster|image/x-cmx|image/x-icon|image/x-portable-anymap|image/x-portable-bitmap|image/x-portable -graymap|image/x -portable-pixmap|image/x-rgb|image/x-xbitmap|image/x-xpixmap|image/x-xwindowdump)$/i;
if (imgFile.length === 0) {
return;
if (!rFilter.test(oFile.type)) {
alert("Wählen Sie das richtige Bildformat!" >}
/ /Code wird nach erfolgreichem Lesen des Bildes ausgeführt
oFReader.onload = function(oFREvent) {
qrcode.decode(oFREvent.target.result);
qrcode.callback = function(data ) {
//Ergebnis des Scannens des QR-Codes
location.href = data;
oFReader.readAsDataURL(oFile); 🎜>destory: function() {
$(tempBtn).off('click');
}
};
var _this_ = this;
var inputDom;
tempBtn.each() {
new _this_($(this));
$('[ node-type=qr-btn] ').on('click', function() {
$(this).find('[node-type=jsbridge]')[0].click();
});
window.Qrcode = Qrcode;
})(window.Zepto ? Zepto : jQuery); >
1. Vorherige Seite aufrufen





2. Die Seite nach dem Aufruf



Verwandte Etiketten：
h5实现二维码扫描 h5扫描二维码
Quelle：php.cn
Vorheriger Artikel：Die neuen HTML5-Funktionen pushState, replaceState und der Unterschied zwischen den beiden _html5-Tutorial-Fähigkeiten Nächster Artikel：Beispiele zur Erläuterung einiger Anwendungen von HTML5-Meta-Tags. _HTML5-Tutorial-Fähigkeiten
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
Aus 2024-04-29 11:01:01
0
3
2266
So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
Aus 2024-04-23 00:22:19
0
11
2399
Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
Aus 2024-04-19 15:37:47
0
1
2013
Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
Aus 2024-04-18 23:52:34
0
1
1897
Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
Aus 2024-04-16 10:10:18
0
0
1967
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage