Html5 implementiert das Scannen und Parsen von QR-Code

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 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 , 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

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:

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

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

Da das Plug-in 0bdc7ea42ab7f52a0f7836421a308203, die HTML-Struktur hat einen festen Anzeigestil auf der Webseite. Um den Schaltflächenstil anzupassen, können wir den Code wie folgt verschachteln:

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

Dann setzen Sie das CSS der Eingabeschaltfläche auf Verstecke die Schaltfläche. Ich verwende zum Beispiel den Attributselektor

Code kopieren

Der Code lautet wie folgt:

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

Hier müssen wir nur den Stil von class="qr-btn" entsprechend unseren eigenen Bedürfnissen definieren.

3. Initialisieren Sie das Qrcode-Objekt auf der Seite

Kopieren Sie den Code

Der Code lautet wie folgt:

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

Hauptcode-Analyse

Code kopieren

Der Code lautet wie folgt:

(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 oFReader = 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\-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("选择正确的图片格式!"); 
return; 
} 
//读取图片成功后执行的代码 
oFReader.onload = function(oFREvent) { 
qrcode.decode(oFREvent.target.result); 
qrcode.callback = 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);

Beispielanzeige

1. Die Seite vor dem Aufruf

2 Aufruf

Das obige ist der detaillierte Inhalt vonHtml5 implementiert das Scannen und Parsen von QR-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!