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实现任意图片lowpoly动画效果实例
May 11 HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 HTML / CSS
移动端Web页面的CSS3 flex布局快速上手指南
May 31 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 HTML / CSS
利用html5的websocket实现websocket聊天室
Dec 12 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
Sep 20 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 HTML / CSS
基于HTML十秒做出淘宝页面
Oct 24 HTML / CSS
聊聊CSS粘性定位sticky案例解析
Jun 01 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 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
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
php7下的filesize函数
2019/09/30 PHP
通过隐藏option实现select的联动效果
2009/11/10 Javascript
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
Python实现多行注释的另类方法
2014/08/22 Python
详解Python当中的字符串和编码
2015/04/25 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
利用python画出折线图
2018/07/26 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
Delphi工程师笔试题
2013/09/21 面试题
职员竞岗演讲稿
2014/05/14 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
教师政风行风评议心得体会
2014/10/21 职场文书
银行实习推荐信
2015/03/27 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
MySQL 时间类型的选择
2021/06/05 MySQL
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android