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

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