Html5实现二维码扫描并解析


引子:
最近公司项目有个需求,微博客户端中, h5 的页面上的某个按钮能够与native 交互呼起摄像头,扫描二维码并且解析。在非微博客户端中(微信或者是原生浏览器,如:safari)呼起系统的拍照或者上传图片按钮,通过拍照或者上传图片解析二维码。
第二种方案需要在前端 js 解析二维码。这样依赖一个第三方的解析库jsqrcode。这个库已经支持在浏览器端呼起摄像头的操作了,但是依赖一个叫getUserMedia的属性。该属性移动端的浏览器支持的都不是很好,所以只能间接的上传图片的方式解析二维码。
getUserMedia属性兼容浏览器列表:

首先感谢 jsqrcode 的开发者,提供这么优秀的解析二维码的代码,为我减少了很大的工作量。jsqrcode 地址:点我
1.解决的问题:
1.能够在微博客户端呼起摄像头扫描二维码并且解析;
2.能够在原生浏览器和微信客户端中扫描二维码并且解析;
2.优点:
web端或者是 h5端可以直接完成扫码的工作;
3.缺点:
图片不清晰很容易解析失败(拍照扫描图片需要镜头离二维码的距离很近),相对于 native 呼起的摄像头解析会有1-2秒的延时。
说明:
此插件需要配合zepto.js 或者 jQuery.js使用
使用方法:
1.在需要使用的页面按照下面顺序引入lib目录下的 js 文件

复制代码
代码如下:

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

2.自定义按钮的 html 样式
因为该插件需要使用<input type="file" /> ,该 html 结构在网页上面是有固定的显示样式,为了能够自定义按钮样式,我们可以按照下面的示例代码结构嵌套代码

复制代码
代码如下:

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

然后设置 input 按钮的 css 隐藏按钮,比如我使用的是属性选择器

复制代码
代码如下:

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

这里我们只需要按照自己的需要定义class="qr-btn"的样式即可。
3.在页面上初始化 Qrcode 对象

复制代码
代码如下:

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

主要代码解析

复制代码
代码如下:

(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.呼起后的页面



相关阅读:
用php实现选择排序的解决方法
asp.net中SqlCacheDependency缓存技术概述
Git上一些修改错误操作的命令使用技巧
JS控制日期显示的小例子
各浏览器对document.getElementById等方法的实现差异解析
Win10系统自由设置时间对电脑进行重启的方法
MSSQL产生死锁的根本原因及解决方法
android图像绘制(七)ClipRect局部绘图/切割原图绘制总结
Bootstrap carousel轮转图的使用实例详解
部分Win10用户遭遇闪屏问题致电脑不能正常使用 微软提供解决方法
win10如何关闭完成字符串?Win10输入提示完成字符串的三种解决方法
iOS应用开发中使用Auto Layout来适配不同屏幕尺寸
jQuery多项选项卡的实现思路附样式及代码
DBA应该知道的一些关于SQL Server跟踪标记的使用
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 电台员工辞职报告 保护环境,我行动200字 创先争优细节与创新读书心得 你是我幸福的依据 小学四年级作文350字:海宁观潮 凡是没有打败你的,都会让你更强大! 期盼团圆 感谢"马丁"帮我完成了心愿 做最好的老师读后感 2015年向国旗敬礼网上寄语 初中初二作文600字:牵动心灵的声音 母爱作文1600字 战争与和平读后感400字 勿忘国耻,爱我中华!作文1300字 祝福丈夫的生日短信 描写彩虹的成语 爱情浅吟,玫瑰留香 水龙吟(采药径) 下放下岗的那天 还是这个办法好作文550字 约定(一) 小学五年级作文650字:一个令我敬佩的人 贻庐岳陈沆秀才 我不相信眼泪 民政局档案工作剖析材料 简析乾隆时期整顿发展西藏经济的政策措施 恶魔王子的爱 妈妈的误会600字 人教版四年级上册五单元作文:血汗长城作文400字 肥皂泡作文400字 毕业生面试的十大误区 助学金感恩心得体会 2012年后进生转化工作总结 叶子生命的意义 中文系求职面试自我介绍 青春最美作文150字 教师学习党员干部廉政自律发言稿 鱼的伤谁理解 财务会计工作总结 龙背山森林公园作文 转正申请书范文2016 【精品】幼儿园小班家长会发言稿 守护着我的天使——影作文300字 我从乡间来之——花开时节满院香 楷书与行楷不同之处说明 学校政教处2016—2017学年度第一学期工作总结 新娘父亲答谢词 2015民生改善专项行动计划 多彩的课余生活作文 我告诉自己不能哭

Copyright © 2016 phpStudy |