Code examples for H5 production of QR code scanning and parsing

This article mainly introduces the relevant information of Html5 to realize QR code scanning and parsing. Friends who need it can refer to the following

introduction:
There is a demand for a company project recently, in the Weibo client , a button on the h5 page can interact with native to call up the camera, scan the QR code and parse it. In non-Weibo clients (WeChat or native browsers, such as Safari), call up the system's photo or upload picture button, and parse the QR code by taking a photo or uploading a picture.
The second solution requires parsing the QR code in front-end js. This relies on a third-party parsing library jsqrcode. This library already supports the operation of calling the camera on the browser side, but it relies on a attribute called getUserMedia. Mobile browsers do not support this attribute very well, so the QR code can only be parsed indirectly by uploading images.
getUserMedia attribute compatible browser list:

First of all, I would like to thank the developer of jsqrcode for providing such an excellent code for parsing QR codes, which has reduced the number of A lot of work. jsqrcode address: click me
My code library address: click me
1. Problems solved:
1. Can call up the camera on the Weibo client to scan the QR code and Parsing;
2. Can scan QR codes and parse them in native browsers and WeChat clients;
2. Advantages:
The web side or h5 side can directly complete the scanning Code work;
3. Disadvantages:
The picture is not clear and 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 camera. There will be a 1-2 second delay in parsing.
Instructions:
This plug-in needs to be used with zepto.js or jQuery.js
Instructions for use:
1. In the page that needs to be used, introduce the js files in the lib directory in the following order

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. Customize the html style of the button
Because the plug-in needs to use file" />, the html structure has a fixed display style on the web page. In order to customize the button style, we can follow the following The sample code structure nested code

The code is as follows:

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

Then set the css of the input button to hide the button, for example, I use Attribute Selector

##The code is as follows:

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

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

3. Initialize Qrcode on the page Object

The code is as follows:

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

Main code analysis

The code is as follows:

(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 o
FRead
er = 
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\-any
map
|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.c
all
back = 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);

Sample display 1. The page before calling up

2. The page after calling up

[Related recommendations]

1.

Html5 free video tutorial

2.

Detailed explanation of the example of H5 completing multiple image uploads

3.

Detailed explanation of H5’s custom attribute data-*

4 .

Teach you how to implement an H5 micro-scenario

5.

Detailed explanation of HTML5 local database instance

The above is the detailed content of Code examples for H5 production of QR code scanning and parsing. For more information, please follow other related articles on the PHP Chinese website!