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实现的黑色个性导航菜单效果
Sep 14 HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
Jun 03 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
Jun 24 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
深入探究HTML5的History API
Jul 09 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 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读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
Python搭建FTP服务器的方法示例
2018/01/19 Python
python中正则表达式的使用方法
2018/02/25 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
pandas的resample重采样的使用
2020/04/24 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
应届生高等护理求职信
2013/10/12 职场文书
春季运动会广播稿大全
2014/02/19 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
Pygame Event事件模块的详细示例
2021/11/17 Python