<meta name="keywords" content="华夏棋牌,h5完成二维码扫描,h5扫描二维码" />
华夏棋牌 > web前端 > H5教程 > 注释

Html5完成二维码扫描并剖析 _html5教程手艺

原创 2016-05-16 15:46:07 0 307
赞助会员专享特权
引子:
比来公司项目有个需求,微博客户端中, 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 文件

复制代码
代码以下: