Html5实现二维码扫描并解析


Posted in HTML / CSS onJanuary 20, 2016

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

Html5实现二维码扫描并解析

首先感谢 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.呼起前的页面

Html5实现二维码扫描并解析

2.呼起后的页面

Html5实现二维码扫描并解析

HTML / CSS 相关文章推荐
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
Apr 01 HTML / CSS
CSS3实现DIV圆角效果完整代码
Oct 10 HTML / CSS
一款纯css3实现的动画加载导航
Oct 08 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
浅析HTML5中的 History 模式
Jun 22 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
MIME类型中application/xml与text/xml的区别介绍
Jan 18 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 #HTML / CSS
HTML5 History API 实现无刷新跳转
Jan 11 #HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
Jan 11 #HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 #HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 #HTML / CSS
Web时代变迁及html5与html4的区别
Jan 06 #HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 #HTML / CSS
You might like
Php做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
非常漂亮的JS代码经典广告
2007/10/21 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
手机端转换rem适应
2017/04/01 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
ElementUI 修改默认样式的几种办法(小结)
2020/07/29 Javascript
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
Python 变量的创建过程详解
2019/09/02 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
电子邮箱格式怎么写
2014/01/12 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
销售人员职业生涯规划范文
2014/03/01 职场文书
学校教师安全责任书
2014/07/23 职场文书
学校安全工作汇报材料
2014/08/16 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
教师业务学习材料
2014/12/16 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
高二化学教学反思
2016/02/22 职场文书
Redis如何实现分布式锁
2021/08/23 Redis