Rumah > hujung hadapan web > Tutorial H5 > H5制作二维码扫描和解析的代码实例

H5制作二维码扫描和解析的代码实例

Y2J
Lepaskan: 2017-05-24 11:58:59
asal
8584 orang telah melayarinya

这篇文章主要介绍了Html5实现二维码扫描并解析 的相关资料,需要的朋友可以参考下

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

首先感谢 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>
Salin selepas log masuk

2.自定义按钮的 html 样式
因为该插件需要使用file" /> ,该 html 结构在网页上面是有固定的显示样式,为了能够自定义按钮样式,我们可以按照下面的示例代码结构嵌套代码

代码如下:

<p class="qr-btn" node-type="jsbridge">扫描二维码1 
<input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码1" /> 
</p>
Salin selepas log masuk


然后设置 input 按钮的 css 隐藏按钮,比如我使用的是属性选择器

代码如下:

input[node-type=jsbridge]{ 
visibility
: hidden; 
}
Salin selepas log masuk


这里我们只需要按照自己的需要定义class="qr-btn"的样式即可。
3.在页面上初始化 Qrcode 对象

代码如下:

//初始化扫描二维码按钮,传入自定义的 node-type 属性 
$(function() { 
Qrcode.init($(&#39;[node-type=jsbridge]&#39;)); 
});
Salin selepas log masuk

主要代码解析

代码如下:

(function($) { 
var Qrcode = function(tempBtn) { 
//该对象只支持微博域下的解析,也就是说不是微博域下的页面只能用第二种方案解析二维码 
if
 (window.WeiboJSBridge) { 
$(tempBtn).on(&#39;click&#39;, this.weiBoBridge); 
} 
else
 { 
$(tempBtn).on(&#39;change&#39;, this.getImgFile); 
} 
}; 
Qrcode.prototype = { 
weiBoBridge: function() { 
WeiboJSBridge.invoke(&#39;scanQRCode&#39;, 
null
, function(params) { 
//得到扫码的结果 
location.href=params.result; 
}); 
}, 
getImgFile: function() { 
var _this_ = this; 
var imgFile = $(this)[0].files; 
var oFile = imgFile[0]; 
var o
FRead
er = 
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\-any
map
|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.c
all
back = function(data) { 
//得到扫码的结果 
location.href = data; 
}; 
}; 
oFReader.readAsDataURL(oFile); 
}, 
destory: function() { 
$(tempBtn).off(&#39;click&#39;); 
} 
}; 
//初始化 
Qrcode.init = function(tempBtn) { 
var _this_ = this; 
var inputDom; 
tempBtn.
each
(function() { 
new _this_($(this)); 
}); 
$(&#39;[node-type=qr-btn]&#39;).on(&#39;click&#39;, function() { 
$(this).find(&#39;[node-type=jsbridge]&#39;)[0].click(); 
}); 
}; 
window.Qrcode = Qrcode; 
})(window.Zepto ? Zepto : jQuery);
Salin selepas log masuk


样例展示
1.呼起前的页面

2.呼起后的页面

【相关推荐】

1. Html5免费视频教程

2. H5完成多图片上传的实例详解

3. 详解H5的自定义属性data-*

4. 教你如何实现一个H5微场景

5. HTML5本地数据库实例详解

Atas ialah kandungan terperinci H5制作二维码扫描和解析的代码实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan