Codebeispiele für die H5-Produktion zum Scannen und Parsen von QR-Codes

Dieser Artikel stellt hauptsächlich die relevanten Informationen von Html5 vor, um das Scannen und Parsen von QR-Codes zu realisieren. Freunde, die sie benötigen, können sich auf die

Einführung beziehen:
In letzter Zeit besteht eine Nachfrage nach einem Unternehmensprojekt Der Weibo-Client kann über eine Schaltfläche auf der h5-Seite mit native interagieren, um die Kamera aufzurufen, den QR-Code zu scannen und ihn 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 einem -Attribut 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 , was die Anzahl der Arbeiten erheblich reduzierte. jsqrcode-Adresse: Klicken Sie auf mich
Meine Code-Bibliotheksadresse: Klicken Sie auf mich
1. Probleme gelöst:
1 Möglichkeit, die Kamera auf dem Weibo-Client aufzurufen, um den QR-Code zu scannen Analyse;
2. Kann QR-Codes in nativen Browsern und WeChat-Clients scannen; 🎜>
3. Nachteile: Das Bild ist nicht klar und kann leicht nicht analysiert werden (zum Aufnehmen von Bildern zum Scannen des Bildes muss sich das Objektiv sehr nahe am QR-Code befinden). Bei der nativen Kamera kommt es zu einer Verzögerung von 1–2 Sekunden.

Hinweis: Dieses Plug-in muss mit zepto.js oder
jQuery
.js verwendet werden Verwendung:
1. Geben Sie auf der Seite, die verwendet werden muss, die js-Dateien im lib-Verzeichnis in der folgenden Reihenfolge ein
Der Code lautet wie folgt:

2. Passen Sie den HTML-Stil der Schaltfläche an

Da das Plug-in

<script src="lib/zepto.js"></script> 
<script src="lib/qrcode.lib.min.js"></script> 
<script src="lib/qrcode.js"></script>

Nach dem Login kopieren

file

" /> verwenden muss, hat die HTML-Struktur eine feste Größe Um den Schaltflächenstil anzupassen, können wir Code gemäß der folgenden Beispielcodestruktur
verschachteln. Der Code lautet wie folgt:

Stellen Sie dann das CSS der Eingabeschaltfläche so ein, dass die Schaltfläche ausgeblendet wird. Ich verwende beispielsweise

Der Code des Attributselektors

<p class="qr-btn" node-type="jsbridge">扫描二维码1 
<input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码1" /> 
</p>

lautet wie folgt:

Hier müssen wir nur class="qr-btn" entsprechend unseren eigenen Bedürfnissen definieren. Stylen Sie es einfach.

3. Initialisieren Sie das Qrcode-

input[node-type=jsbridge]{ 
visibility
: hidden; 
}

-Objekt

auf der Seite

Der Code lautet wie folgt:Hauptcode-Analyse

//初始化扫描二维码按钮，传入自定义的 node-type 属性 
$(function() { 
Qrcode.init($('[node-type=jsbridge]')); 
});

Der Code lautet wie folgt:

Beispielanzeige

(function($) { 
var Qrcode = function(tempBtn) { 
//该对象只支持微博域下的解析，也就是说不是微博域下的页面只能用第二种方案解析二维码 
if
 (window.WeiboJSBridge) { 
$(tempBtn).on('click', this.weiBoBridge); 
} 
else
 { 
$(tempBtn).on('change', this.getImgFile); 
} 
}; 
Qrcode.prototype = { 
weiBoBridge: function() { 
WeiboJSBridge.invoke('scanQRCode', 
null
, function(params) { 
//得到扫码的结果 
location.href=params.result; 
}); 
}, 
getImgFile: function() { 
var _this_ = this; 
var imgFile = $(this)[0].files; 
var oFile = imgFile[0]; 
var o
FRead
er = 
new
 FileReader(); 
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\-any
map
|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("选择正确的图片格式!"); 
return; 
} 
//读取图片成功后执行的代码 
oFReader.
onload
 = function(oFREvent) { 
qrcode.decode(oFREvent.target.result); 
qrcode.c
all
back = function(data) { 
//得到扫码的结果 
location.href = data; 
}; 
}; 
oFReader.readAsDataURL(oFile); 
}, 
destory: function() { 
$(tempBtn).off('click'); 
} 
}; 
//初始化 
Qrcode.init = function(tempBtn) { 
var _this_ = this; 
var inputDom; 
tempBtn.
each
(function() { 
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. Die Seite vor dem Aufruf

2. Die Seite nach dem Aufruf

[Verwandte Empfehlungen]

1 >Kostenloses HTML5-Video-Tutorial

2. Detaillierte Erklärung eines Beispiels für das Hochladen mehrerer Bilder durch H5

3. Detaillierte Erklärung des benutzerdefinierten Attributs von H5 data-*

Lernen Sie, wie Sie ein H5-Mikroszenario implementieren

5.Detaillierte Erläuterung der lokalen HTML5-Datenbankinstanz

Das obige ist der detaillierte Inhalt vonCodebeispiele für die H5-Produktion zum Scannen und Parsen von QR-Codes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!