Html5 implémente les compétences du didacticiel _html5 en matière de numérisation et d'analyse de code QR

Introduction :
Récemment, il existe une exigence pour un projet d'entreprise. Dans le client Weibo, un bouton sur la page h5 peut interagir avec le natif pour appeler la caméra, scanner le code QR et l'analyser. Dans les clients non Weibo (WeChat ou navigateurs natifs, tels que Safari), appelez le bouton de photo ou de téléchargement d'image du système et analysez le code QR en prenant une photo ou en téléchargeant une image.
La deuxième solution nécessite d'analyser le code QR dans le js front-end. Cela repose sur une bibliothèque d'analyse tierce jsqlrcode. Cette bibliothèque prend déjà en charge l'opération d'appel de la caméra côté navigateur, mais elle s'appuie sur une propriété appelée getUserMedia. Les navigateurs mobiles ne prennent pas très bien en charge cet attribut, le code QR ne peut donc être analysé qu'indirectement en téléchargeant des images.
Liste des navigateurs compatibles avec l'attribut GetUserMedia :

Tout d'abord, je voudrais remercier le développeur de jsqrcode pour avoir fourni un excellent code pour analyser les codes QR, ce qui a considérablement réduit ma charge de travail. Adresse jsqrcode : Cliquez sur moi
Adresse de ma bibliothèque de codes : Cliquez sur moi
Problèmes résolus :
1. le client appelle la caméra pour scanner le code QR et l'analyser ;
2. Peut scanner le code QR et l'analyser dans le navigateur natif et le client WeChat ;
2. >Le côté web ou le côté h5 peut directement terminer le travail de numérisation du code QR ;
3. Inconvénients :
L'image n'est pas claire et il est facile de ne pas l'analyser (prendre des photos). pour numériser l'image, l'objectif doit être éloigné du code QR) (distance très proche), il y aura un délai de 1 à 2 secondes par rapport à l'analyse native de la caméra d'appel.
Remarque :
Ce plug-in doit être utilisé avec zepto.js ou jQuery.js
Instructions d'utilisation :
1 . Où vous devez l'utiliser La page importe les fichiers js dans le répertoire lib dans l'ordre suivant

Copiez le codeLe code est le suivant :

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

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

2. Personnalisez le style HTML du bouton

Étant donné que le plug-in doit utiliser <input type="file" />, la structure html a un style d'affichage fixe sur la page Web Afin de personnaliser le style du bouton, nous pouvons imbriquer le code selon l'exemple de structure de code suivant

Copiez le code

Le code est le suivant :

<div class="qr-btn" node-type="jsbridge">Scannez le code QR 1

<nœud d'entrée- type="jsbridge" type="file " name="myPhoto" value="Scan QR code 1" />

</div>


Puis définissez le CSS de l'entrée bouton pour masquer le bouton, par exemple, j'utilise l'attribut Sélecteur

Copier le code

Le code est le suivant :

input[node-type=jsbridge ]{

visibility: Hidden;

>


Ici, il suffit de définir le style de class="qr -btn" selon nos propres besoins.

3. Initialisez l'objet Qrcode sur la page

Copiez le code

Le code est la suivante :

//Initialisez le bouton de numérisation du code QR et transmettez l'attribut de type de nœud personnalisé

$(function() {

Qrcode.init($('[ node-type= jsbridge]'));
});



Analyse du code principal

Copier le code

Le code est le suivant :

(function($) {
var Qrcode = function(tempBtn) {
//Cet objet ne prend en charge que l'analyse sous le domaine Weibo, ce qui signifie qu'il ne concerne pas uniquement les pages sous le domaine Weibo domaine. La deuxième solution peut être utilisée pour analyser le code QR
if (window.WeiboJSBridge) {
$(tempBtn).on('click', this.weiBoBridge)
} else { $( tempBtn).on('change', this.getImgFile);
}
}
Qrcode.prototype = {
weiBoBridge: function() {
WeiboJSBridge.invoke( 'scanQRCode' , null, function(params) {
//Obtenir le résultat de la numérisation du code QR
location.href=params.result
}); : function() {
var _this_ = this;
var imgFile = $(this)[0].files;
var oFile = imgFile[0]; ;
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("Choisissez le bon format d'image!"); >}
/ /Code exécuté après avoir lu avec succès l'image
oFReader.onload = function(oFREvent) {
qrcode.decode(oFREvent.target.result
qrcode.callback = function(data); ) {
//Obtenir le résultat de la numérisation du code QR
location.href = data;
};
oFReader.readAsDataURL(oFile); 🎜>destory: function() {
$(tempBtn).off('click');
}
}
//Initialisation
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. Appeler la page précédente





2. La page après avoir appelé