Html5实现二维码扫描并解析


当前第2页 返回上一页

代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

(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 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\-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("选择正确的图片格式!");

return;

}

//读取图片成功后执行的代码

oFReader.onload = function(oFREvent) {

qrcode.decode(oFREvent.target.result);

qrcode.callback = 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);


样例展示
1.呼起前的页面

2.呼起后的页面

以上就是Html5实现二维码扫描并解析的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

深入了解h5中history特性--pushstate、replacestate

【h5开发工具】2017最好用的10种HTML5应用开发工具推荐

基于HTML5陀螺仪实现移动动画效果

HTML5 中的一些有趣的新特性

HTML5 video怎么停止播放视频

h5新特性及网页布局实例

简单介绍HTML5新增及移除的元素

html中表单的相关知识总结(代码实例)

HTML5实现上传图片预览效果代码

HTML5拖放的实现方法

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...