Html5 QR code scanning and parsing, html5 Parsing

Html5 QR code scanning and parsing, html5 Parsing

Introduction:
Recently, there is a demand for a company project. In the Weibo client, a button on the h5 page can interact with native to call the camera, scan the QR code and parse it. In a non-Weibo client (or a native browser such as safari), call the system's photo taking or upload image button to take a photo or upload an image to parse the QR code.
The second solution needs to parse the QR code in front-end js. In this way, jsqrcode is dependent on a third-party Parsing Library. This library supports calling the camera on the browser, but relies on a property called getUserMedia. This property is not supported by mobile browsers, so you can only parse the QR Code indirectly by uploading images.
List of getUserMedia attributes compatible browsers:

First of all, I would like to thank the developers of jsqrcode for providing such excellent code for parsing QR codes, which has greatly reduced my workload. Jsqrcode address: Click me
My code library address: Click me
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

The Code is as follows:
<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
Because the plug-in requires <input type = "file"/>, the html structure has a fixed display style on the webpage. to customize the button style, we can use the following sample code structure to nest the code.

The Code is as follows:
<Div class = "qr-btn" node-type = "jsbridge"> 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.

The Code is as follows:
Input [node-type = jsbridge] {
Visibility: hidden;
}

Here we only need to define the class = "qr-btn" style as needed.
3. initialize the Qrcode object on the page

The Code is as follows:
// Initialize the scan QR code button to pass in the Custom node-type attribute
$ (Function (){
Qrcode. init ($ ('[node-type = jsbridge]');
});

Main code parsing

The Code is as follows:
(Function ($ ){
Var Qrcode = function (tempBtn ){
// This object can only be parsed in the microdomain. That is to say, the second method is not used to parse the QR code on pages in the microdomain.
If (window. WeiboJSBridge ){
$ (TempBtn). on ('click', this. weiBoBridge );
} Else {
$ (TempBtn). on ('change', this. getImgFile );
}
};
Qrcode. prototype = {
WeiBoBridge: function (){
WeiboJSBridge. invoke ('scanqrcode', null, function (params ){
// Obtain the scan result
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 \ /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;
}
// Code executed after the image is read successfully
OFReader. onload = function (oFREvent ){
Qrcode.decode(oFREvent.tar get. result );
Qrcode. callback = function (data ){
// Obtain the scan result
Location. href = data;
};
};
OFReader. readAsDataURL (oFile );
},
Destory: function (){
$ (TempBtn). off ('click ');
}
};
// Initialization
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 );

Example
1. Page before calling

2. Page after the call