html识别二维码,h5调取二维码扫描
简介：
最近公司项目里有个要求。在微博客户端中，h5的页面上的一个按钮可以和native交互调出摄像头，扫描二维码，进行分析。在非微博客户端(微信或原生浏览器，如safari)，调用系统的拍照或上传图片按钮，通过拍照或上传图片分析二维码。
第二种方案需要解析前端js中的二维码。它依赖于第三方解析库jsqrcode。这个库已经支持在浏览器端调用相机的操作，但是它依赖于一个名为getUserMedia的属性。物业移动端上的浏览器不太支持，只能间接上传图片解析二维码。
GetUserMedia属性兼容的浏览器列表：
首先感谢jsqrcode的开发者提供了这么优秀的分析二维码的代码，减轻了我的工作量。Jsqrcode地址：点击我
我的代码基址：点击我。
1.需要解决的问题：
1.可以在微博客户端调用摄像头扫描二维码进行分析；
2.能够扫描二维码，并在原生浏览器和微信客户端进行分析；
2.优势：
web或h5终端可以直接完成扫码；
3.缺点：
如果图片不清晰，很容易解析失败(拍照和扫描图片需要镜头靠近二维码)，与原生调用的相机分辨率相比会有1-2秒的延迟。说明：
这个插件需要使用使用方法：和zepto.js或者jQuery.js
1.在需要使用的页面中，按照以下顺序介绍lib目录下的js文件复制代码。代码如下：
script src= lib/zepto . js /script
script src= lib/QR code . lib . min . js /script
script src= lib/QR code . js /script
2.自定义按钮的html样式
因为插件需要使用输入类型=file/，所以html结构在网页上有固定的显示样式。为了自定义按钮样式，我们可以按照如下示例代码结构嵌套代码复制代码：
QR-BTN 节点-类型= jsbridge 扫描二维码1
input-type= js bridge type= file name= my photo value= scan QR code 1 /
/div
然后设置输入按钮的css隐藏按钮。例如，我使用属性选择器复制代码，如下所示：
输入[node-type=jsbridge]{
可见性：隐藏；
}
这里我们只需要根据自己的需求来定义class=qr-btn 的样式。
3.初始化Qrcode对象复制页面上的代码代码，如下所示：
//初始化扫描二维码按钮，传入自定义节点类型属性。
$(function() {
QR code . init($([node-type=js bridge])；
});
主要代码分析复制代码如下：
(函数($) {
var Qrcode=function(tempBtn) {
//这个对象只支持在微博域解析，也就是说不在微博域的页面只能使用第二种方案解析二维码。
如果(窗口。WeiboJSBridge) {
$(tempBtn)。on(点击，this . Weibo bridge)；
}否则{
$(tempBtn)。on(change ，this . getimgfile)；
}
};
Qrcode.prototype={
weiBoBridge:函数(){
weibojsbridge . invoke( scan QR code ，null，function(params) {
//获取扫码结果
location . href=params . result；
});
},
getImgFile: function() {
var _ this _=this
var imgFile=$(this)[0]。文件；
var oFile=img file[0]；
var of reader=new FileReader()；
var rFilter=/^(？image \/BMP image \/cis \-cod image \/gif image \/ief 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 \-位图 image \/image
if (imgFile.length===0) {
返回；
}
如果(！rFilter.test(oFile.type)) {
Alert(选择正确的图片格式！);
返回；
}
//成功读取图片后执行的代码
of reader . onload=function(of event){
QR code . decode(of event . target . result)；
QR code . callback=function(data){
//获取扫码结果
location.href=data
};
};
of reader . readasdataurl(oFile)；
},
destory:函数(){
$(tempBtn).关(点击);
}
};
//初始化
Qrcode.init=function(tempBtn) {
var _ this _=这个
var inputDom
tempBtn.each(function() {
new _ this _($(this))；
});
$([node-type=qr-btn]).on(click ，function() {
$(这个)。查找([node-type=jsbridge])[0].单击();
});
};
窗户Qrcode=Qrcode。
})(窗口。泽普托？zepto:jQuery)；样例展示
1.呼起前的页面
2.呼起后的页面
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。