HTML5 ouvre la fonction de numérisation de code de téléphone mobile et ses avantages et inconvénients

1. Possibilité d'appeler la caméra sur le client Weibo pour scanner le code QR et l'analyser ;

2. Capable de scanner et d'analyser les codes QR dans les navigateurs natifs et les clients WeChat ;

Le côté Web ou le côté h5 peuvent directement effectuer le travail de numérisation de code ;

Si l'image n'est pas claire, 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 à l'appel natif, l'analyse de la caméra aura un retard de 1-). 2 secondes.

illustrer:

Ce plug-in doit être utilisé avec zepto.js ou jQuery.js

1. Dans la page à utiliser, introduisez les fichiers js dans le répertoire lib dans l'ordre 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 bouton

Ajoutez un attribut personnalisé pour le bouton personnalisé, le nom de l'attribut est de type nœud

Ajoutez un attribut personnalisé au bouton de saisie, le nom de l'attribut est de type nœud

É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.

 <div> <div class=qr-btn node-type=qr-btn>Scanner le code QR 1 <input node-type=jsbridge type=file name=myPhoto value=Scanner le code QR 1 /> </div> </div >

Définissez ensuite le CSS du bouton de saisie pour masquer le bouton. Par exemple, j'utilise le sélecteur d'attribut.

 input[node-type=jsbridge]{ display:none;}

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

3. Initialisez l'objet Qrcode sur la page

 //Initialisez le bouton de numérisation du code QR et transmettez l'attribut de type de nœud personnalisé $(function() { Qrcode.init($('[node-type=qr-btn]')); });

Analyse du code principal

 (function($) { var Qrcode = function(tempBtn) { var _this_ = this; var isWeiboWebView = /__weibo__/.test(navigator.userAgent); if (isWeiboWebView) { if (window.WeiboJSBridge) { _this_.bridgeReady(tempBtn ); } autre { document.addEventListener('WeiboJSBridgeReady', function() { _this_.bridgeReady(tempBtn); }); } } else { _this_.nativeReady(tempBtn) } }; $('[node-type=jsbridge]',tempBtn).on('click',function(e){ e.stopPropagation(); }); $(tempBtn).bind('click',function(e)); { $(this).find('input[node-type=jsbridge]').trigger('click' }); $(tempBtn).bind('change', this.getImgFile); }, bridgeReady : function(tempBtn) { $(tempBtn).bind('click', this.weiBoBridge); }, weiBoBridge : function() { window.WeiboJSBridge.invoke('scanQRCode', null, fonction (paramètres) { //Obtenir le résultat de la numérisation du code QR $('.result-qrcode').append(params.result + '<br/>' } ); getImgFile: function() { var _this_ = this; var inputDom = $(this).find('input[node-type=jsbridge]'); var imgFile = inputDom[0].files; 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/-i con|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 ! } oFReader.onload = function (oFREvent) { qrcode ; .decode(oFREvent.target.result); qrcode.callback = function(data) { //Obtenir le résultat de la numérisation du code QR $('.result-qrcode').append(data + '<br/>' }; oFReader.readAsDataURL(oFile); { $( tempBtn).off('clic'); } }; Qrcode.init = function(tempBtn) { var _this_ = this; tempBtn.each(function() { new _this_($(this)); }); window.Qrcode = Qrcode;})(window.Zepto ? Zepto : jQuery);

Ce qui précède est la fonction de numérisation de téléphone mobile HTML5 et ses avantages et inconvénients introduits par l'éditeur. J'espère qu'elle vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !