• 售前

  • 售后

热门帖子
入门百科

Html5实现二维码扫描并解析

[复制链接]
爱喝水的姑娘 显示全部楼层 发表于 2021-10-26 14:03:48 |阅读模式 打印 上一主题 下一主题
引子:
最近公司项目有个需求,微博客户端中, 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>

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.呼起前的页面


2.呼起后的页面

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作