HTML5 implémente l'analyse et l'analyse du code QR

Cet article présente principalement les informations pertinentes du HTML5 pour réaliser la numérisation et l'analyse de code QR. Les amis qui en ont besoin peuvent se référer à l'

introduction :
Il y a une demande pour un projet d'entreprise récemment, 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 les attributs GetUserMedia :

Tout d'abord, je voudrais remercier le développeur de jsqrcode pour avoir fourni un code aussi excellent pour analyser les codes QR. , ce qui a réduit le nombre de Beaucoup de travail. Adresse jsqrcode : Cliquez sur moi
Adresse de ma bibliothèque de codes : Cliquez sur moi
1. Problèmes résolus :
Possibilité d'appeler la caméra sur le client Weibo pour scanner le code QR et Analyse ;
2. Capable de scanner et d'analyser les codes QR dans les navigateurs natifs et les clients WeChat ;
2 Avantages :
Le côté Web ou le côté h5 peuvent scanner directement le travail 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 nécessite que l'objectif soit très proche du code QR), par rapport à la caméra native. Il y aura un délai de 1 à 2 secondes dans l'analyse.

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 code

Le code est le suivant :

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

2. Personnalisez le style HTML du boutonCar le plug-in doit utiliser , la structure html a un affichage fixe sur le style de 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

code Comme suit :

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

Définissez ensuite le css du bouton de saisie pour masquer le bouton Par exemple, je. utilisez le sélecteur d'attribut

Copier le code

Le code est le suivant :

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

Ici nous il suffit de définir le style de class="qr-btn" en fonction de nos propres besoins.

3. Initialisez l'objet Qrcode sur la page

Copiez le code

Le code est le suivant :

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

Analyse du code principal

Copier le code

Le code est le suivant :

(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);

Exemple d'affichage 1. La page avant l'appel

2. . La page après avoir appelé

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!