Html5实现二维码扫描并解析-web前端教程

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

引子：

最近公司项目有个需求，微博客户端中， h5 的页面上的某个按钮能够与native 交互呼起摄像头，扫描二维码并且解析。在非微博客户端中（微信或者是原生浏览器，如：safari）呼起系统的拍照或者上传图片按钮，通过拍照或者上传图片解析二维码。

第二种方案需要在前端 js 解析二维码。这样依赖一个第三方的解析库jsqrcode。这个库已经支持在浏览器端呼起摄像头的操作了，但是依赖一个叫getUserMedia的属性。该属性移动端的浏览器支持的都不是很好，所以只能间接的上传图片的方式解析二维码。

getUserMedia属性兼容浏览器列表：

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 样式

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

代码如下:

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

然后设置 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.呼起后的页面

以上就是Html5实现二维码扫描并解析的详细内容，更多请关注我！

这里推荐一下我的前端学习交流圈：767273102 ，里面都是学习前端的从最基础的HTML+CSS+JS炫酷特效，游戏，插件封装，设计模式到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴。2020最新技术，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!

学习前端，我们是认真的

Html5实现二维码扫描并解析-web前端教程相关推荐

基于MUI框架的HTML5+的二维码扫描实现
Barcode的一个实现案例一.简介 Barcode模块管理条码扫描,提供常见的条码(二维码及一维码)的扫描识别功能,可调用设备的摄像头对条码图片扫描进行数据输入.通过plus.ba ...
Android 基于Zxing二维码扫描的光速实现
Android 十分钟光速实现二维码扫描前言在项目中要使用到二维码的相关内容,我们第一时间想到的是使用大名鼎鼎的zxing或者ZBar开源框架: github-zxing官方库的地址 github ...
zxing 二维码扫描优化
先罗列优化点: 1.优化扫描精度 (增加解析成功率) hints.put(DecodeHintType.TRY_HARDER, Boolean.TRUE); 2.生成图片(用于被解析)时不剪切图片(增 ...
MUI 结合 HTML5+ 实现的二维码扫描功能
扫码登录的实现原理原理解释: 接下来就是对于这个服务的详细实现.首先,大概说一下原理:用户打开网站的登录页面的时候,向浏览器的服务器发送获取登录二维码的请求.服务器收到请求后,随机生成一个uuid, ...
web/html5调用摄像头实现二维码扫描效果（代码实例）
本文给大家介绍如何用web/html5调用摄像头实现二维码扫描的效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 利用html5(navigator.getUserMedia)调 ...
基于MUI框架的使用HTML5+实现的二维码扫描功能
Barcode的一个实现案例一.简介 Barco ...
html5调用设备摄像头，实现二维码扫描
html5调用设备摄像头,实现二维码扫描最近在做一个签到系统,由于我直接使用了纯网页,因此调用摄像头进行扫码成了大问题.经过几番费力的百度终于找到解决方法. 主要用到MediaDevices.get ...
微信二维码扫描登录原理解析
扫二维码登录现在比较常见,比如微信.支付宝等 PC 端登录,并且好像每款 APP 都支持扫码登录. 一,传统项目移动端基于 token 的认证机制在了解扫码登录原理之前,有必要先了解移动端基于 to ...
聊一聊二维码扫描登录原理
点击上方好好学java ,选择星标公众号重磅资讯.干货,第一时间送达今日推荐:2 个月的面试亲身经历告诉大家,如何进入大厂? 扫二维码登录现在比较常见,比如微信.支付宝等 PC 端登录,并且 ...
QML for Android 实现二维码扫描（QZXing）
前言由于项目要求,需要用 Qt 做一个Android 程序用于扫描二维码并获取扫码内容,之前参考了很多资料,很多都是基于桌面端的二维码识别,如一去丶二三里大神的Qt之二维码扫描,原理是直接导入一张二 ...

Html5实现二维码扫描并解析-web前端教程

Html5实现二维码扫描并解析-web前端教程相关推荐

最新文章

热门文章