HTML5 enable the mobile phone scanning function and advantages and disadvantages, html5 mobile phone scanning advantages and disadvantages

HTML5 enable the mobile phone scanning function and advantages and disadvantages, html5 mobile phone scanning advantages and disadvantages

1. Solved problems:

1. The Weibo client can call a camera to scan the QR code and parse it;

2. Scan and parse the QR code in the native browser and client;

2. Advantages:

The web client or h5 client can directly scan the Code;

3. Disadvantages:

If the image is not clear, resolution may fail (the camera needs to scan the image very close to the QR code). The resolution delay is 1-2 seconds compared with that of the native camera.

Note:

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

Usage:

1. Introduce the js files under the lib directory in the following order on the desired page

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

2. Custom button html Style

Add a custom property for the Custom button. The property name is node-type.

Add a custom attribute for the input button. The attribute name is node-type.

Because this plug-in needs to be used<input type="file" /> The html structure has a fixed display style on the webpage. 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>

Set the css hide button of the input button. For example, I use the attribute selector.

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

Here we only need to define the class = "qr-btn" style as needed.

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 parsing

(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 (temp Btn) {$ ('[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 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 \ /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 ("select the correct image format! "); Return;} oFReader. onload = function (oFREvent) {qrcode.decode(oFREvent.tar get. result); qrcode. callback = function (data) {// get the result of scanning the 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 = Qrcod E;}) (window. Zepto? Zepto: jQuery );

Summary

The above is the HTML5 mobile phone scanning function and its advantages and disadvantages introduced by xiaobian. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!