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将文字描边及填充文字颜色的方法
Mar 07 HTML / CSS
使用CSS实现阅读进度条
Feb 27 HTML / CSS
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
HTML5文档结构标签
Apr 21 HTML / CSS
详解Html5原生拖拽操作
Jan 12 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
May 26 HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
Aug 05 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
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
两种php调用Java对象的方法
2006/10/09 PHP
并发下常见的加锁及锁的PHP具体实现代码
2010/10/12 PHP
PHP的异常处理类Exception的使用及说明
2012/06/13 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
php测试kafka项目示例
2020/02/06 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
Python+MongoDB自增键值的简单实现
2016/11/04 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
python 贪心算法的实现
2020/09/18 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
蛋白质世界:Protein World
2017/11/23 全球购物
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
公司员工检讨书
2014/02/08 职场文书
五型班组建设方案
2014/02/10 职场文书
2014年度个人总结范文
2015/03/09 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书