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绘制出各种几何图形
Aug 17 HTML / CSS
CSS3 translate导致字体模糊的实例代码
Aug 30 HTML / CSS
CSS3教程(1):什么是CSS3
Apr 02 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
Dec 31 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
Apr 23 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
Jun 04 HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
Dec 02 HTML / CSS
什么是css原子化,有什么用?
Apr 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
php中adodbzip类实例
2014/12/08 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
python爬虫实现获取下一页代码
2020/03/13 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
房屋改造计划书
2014/01/10 职场文书
店长职务说明书
2014/02/04 职场文书
法人代表任命书范本
2014/06/05 职场文书
三八节标语
2014/06/27 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
小学同学聚会感言
2015/07/30 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers