HTML5 opens the mobile phone code scanning function and its advantages and disadvantages

1. Ability to call up the camera on the Weibo client to scan the QR code and parse it;

2. Able to scan and parse QR codes in native browsers and WeChat clients;

The web side or h5 side can directly complete the code scanning work;

If the picture is not clear, it is easy to fail to parse (taking pictures to scan the picture requires the lens to be very close to the QR code). Compared with the native call, the camera parsing will have a delay of 1-2 seconds.

illustrate:

This plug-in needs to be used with zepto.js or jQuery.js

1. In the page that needs to be used, introduce the js files in the lib directory in the following order

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

2. Customize the html style of the button

Add a custom attribute for the custom button, the attribute name is node-type

Add a custom attribute to the input button, the attribute name is node-type

Because the plug-in needs to use <input type=file /> , the html structure has a fixed display style on the web page. In order to customize the button style, we can nest the code according to the following sample code structure

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

Then set the css of the input button to hide the button. For example, I use the attribute selector.

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

Here we only need to define the style of class=qr-btn according to our own needs.

3. Initialize the Qrcode object on the page

 //Initialize the scan QR code button and pass in the custom node-type attribute $(function() { Qrcode.init($('[node-type=qr-btn]')); });

Main code analysis

 (function($) { var Qrcode = function(tempBtn) { var _this_ = this; var isWeiboWebView = /__weibo__/.test(navigator.userAgent); if (isWeiboWebView) { if (window.WeiboJSBridge) { _this_.bridgeReady(tempBtn ); } else { document.addEventListener('WeiboJSBridgeReady', function() { _this_.bridgeReady(tempBtn); }); } } else { _this_.nativeReady(tempBtn); } }; Qrcode.prototype = { nativeReady: function(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, function(params) { //Get the result of scanning the QR code $('.result-qrcode').append(params.result + '<br/>'); }); }, getImgFile: function() { var _this_ = this; var inputDom = $(this).find('input[node-type=jsbridge]'); var imgFile = inputDom[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/-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(Choose the correct image format!); return; } oFReader.onload = function(oFREvent) { qrcode .decode(oFREvent.target.result); qrcode.callback = function(data) { //Get the result of scanning the QR code $('.result-qrcode').append(data + '<br/>'); }; }; oFReader.readAsDataURL(oFile); }, destory: function() { $( tempBtn).off('click'); } }; Qrcode.init = function(tempBtn) { var _this_ = this; tempBtn.each(function() { new _this_($(this)); }); }; window.Qrcode = Qrcode;})(window.Zepto ? Zepto : jQuery);

The above is the HTML5 mobile phone scanning function and its advantages and disadvantages introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!