新浦京81707con > 功能介绍 > Html5实现二维码扫描并解析,扣丁学堂简述HTML5打

原标题:Html5实现二维码扫描并解析,扣丁学堂简述HTML5打

浏览次数:178 时间:2019-05-02

H伍端呼起摄像头扫描二维码并分析

2016/01/22 · HTML5 · 二维码

本文小编: 伯乐在线 - zhiqiang21 。未经作者许可,禁止转发!
接待插手伯乐在线 专辑小编。

Html5完结二维码扫描并分析,html伍剖析

引子:
这些年公司项目有个须要,网易客户端中, h伍 的页面上的有个别开关能够与native 交互呼起录像头,扫描2维码并且解析。在非天涯论坛客户端中(微信可能是原生浏览器,如:safari)呼起系统的拍照只怕上传图片按键,通过拍照也许上传图片解析贰维码。
其次种方案必要在前端 js 解析2维码。那样借助贰个第3方的辨析库jsqrcode。那一个库已经援助在浏览器端呼起录像头的操作了,不过依赖2个叫getUserMedia的特性。该属性移动端的浏览器支持的都不是很好,所以只可以直接的上传图片的点子分析2维码。
getUserMedia属性包容浏览器列表:

新莆京娱乐app 1

先是多谢 jsqrcode 的开采者,提供那样美好的分析贰维码的代码,为本身压缩了相当的大的职业量。jsqrcode 地址:点小编
本人的代码库地址:点本身
壹.缓慢解决的难题:
一.能力所能达到在果壳网客户端呼起摄像头扫描贰维码并且解析;
二.能力所能达到在原生浏览器和微信客户端中围观二维码并且解析;
2.优点:
web端大概是 h5端能够一贯到位扫码的干活;
3.缺点:
图表不清楚很轻易解析失利(拍照扫描图片须要镜头离二维码的相距很近),相对于 native 呼起的留影头解析会有一-2秒的延时。
说明:
此插件须求十分zepto.js 或然 jQuery.js使用
动用办法:
壹.在要求使用的页面遵照上面顺序引进lib目录下的 js 文件

代码如下:
<script src="lib/zepto.js"></script>
<script src="lib/qrcode.lib.min.js"></script>
<script src="lib/qrcode.js"></script>

二.自定义按键的 html 样式
因为该插件须要运用<input type="file" /> ,该 html 结构在网页上边是有定位的来得样式,为了能够自定义按钮样式,大家能够根据上面包车型客车示范代码结构嵌套代码

代码如下:
<div class="qr-btn" node-type="jsbridge">扫描二维码1
<input node-type="jsbridge" type="file" name="myPhoto" value="扫描贰维码壹" />
</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);

样例体现
一.呼起前的页面

新莆京娱乐app 2

二.呼起后的页面

新莆京娱乐app 3

引子: 目前公司项目有个要求,博客园客户端中, h伍 的页面上的某部开关能够与native 交互呼起录像头...

今昔手提式有线电话机支付扫码已经大规模的运用与大家的生活中,今日本篇小说小编就和我们分享一下HTML5开荒手提式有线电话计算机扫描码作用的优缺点,小说中列出详细的代码供大家参考,喜欢HTML5开采技巧的伙伴上面就小说者一齐来看一下呢。

2016年6月29日补充:

近年做了有个别与表单相关的体系,使用了h伍的input控件,在应用进程中相遇了不少的坑。也包蕴与这篇小说相关的。

首先大家应有清楚使用h五新提供的质量getUserMedia其一天性,是足以调取系统的录像头进行拍照只怕是拍照的,可是包容性帮忙的不得了,所以当大家需求获得系统的多媒体权有效期大家都不会利用这些性情。

使用<input type="file">标签大家能够直接的呼起系统选用文件的窗口,来读取系统文件。不过在WebView中,因为安卓权限的难题,大家是不能直接获取读取文件这一个操作的。而在原生的浏览器中是不设有那个标题标。所以选拔使用那个input的时候自然要小心和睦的页面是重大运营在webview中照旧浏览器中。倘诺留意运维在客户端的webvie中,是内需客户端的同室帮忙的。

在IOS的一些系统版本中也会并发那一个题目。具体的能够参照下边包车型客车参考文章。
参照文章:

新莆京娱乐app 4扣丁学堂HTML5构建

引子:

新近合作社项目有个要求,腾讯网客户端中, h伍的页面上的有些按键能够与native 交互呼起录像头,扫描2维码并且解析。在非天涯论坛客户端中(微信依然是原生浏览器,如:safari)呼起系统的照相或许上传图片按钮,通过拍照大概上传图片解析2维码。

第三种方案要求在前端 js 解析二维码。那样借助叁个第1方的解析库jsqrcode。这几个库已经帮忙在浏览器端呼起录像头的操作了,然而凭仗叁个叫getUserMedia的习性。该属性移动端的浏览器帮忙的都不是很好,所以不得不直接的上传图片的章程分析二维码。

getUserMedia品质包容浏览器列表:
新莆京娱乐app 5

率先谢谢 jsqrcode 的开辟者,提供这么理想的剖析2维码的代码,为本人压缩了十分的大的职业量。jsqrcode 地址:点我

自个儿的代码库地址:点我

一.缓和的难题:

一.力所能致在和讯客户端呼起录像头扫描贰维码并且解析;
2.力所能致在原生浏览器和微信客户端中围观2维码并且解析;

一、化解的标题:

2.优点:

web端只怕是 h伍端能够一贯完事扫码的劳作;

一、能够在新浪客户端呼起录像头扫描二维码并且解析;

3.缺点:

图片不清晰很轻巧解析退步(拍照扫描图片要求镜头离2维码的距离很近),相对于 native 呼起的拍片头解析会有一-二秒的延时。

二、能够在原生浏览器和微信客户端中围观②维码并且解析;

说明:

此插件要求十二分zepto.js 或者 jQuery.js使用

2、优点:

采纳办法:

一.在急需使用的页面依照下边顺序引进lib目录下的 js 文件

<script src="lib/zepto.js"></script> <script src="lib/qrcode.lib.min.js"></script> <script src="lib/qrcode.js"></script>

1
2
3
   <script src="lib/zepto.js"></script>
   <script src="lib/qrcode.lib.min.js"></script>
   <script src="lib/qrcode.js"></script>

二.自定义按键的 html 样式

为自定义的按键增多自定义属性,属性名为node-type
为 input 按键增多自定义的性质, 属性名称叫node-type

因为该插件供给运用 style="font-family: 'Courier 10 Pitch', Courier, monospace;font-size: 12px;background-color: #f四f四f四"><input type=”file” /> ,该 html 结构在网页下边是有定点的展现样式,为了能够自定义按键样式,大家得以遵循上边包车型地铁言传身教代码结构嵌套代码

<div> <div class="qr-btn" node-type="qr-btn">扫描2维码一<input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码壹" /> </div> </div>

1
2
3
4
5
    <div>
        <div class="qr-btn" node-type="qr-btn">扫描二维码1
            <input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码1" />
        </div>
    </div>

下一场设置 input 按钮的 css 隐藏按键,比方本身动用的是性质选择器

input[node-type=jsbridge]{ display:none; }

1
2
3
input[node-type=jsbridge]{
    display:none;
}

此处大家只必要遵循自身的内需定义class="qr-btn"的样式就可以。

3.在页面上开始化 Qrcode 对象

//起头化扫描2维码按键,传入自定义的 node-type 属性 $(function() { Qrcode.init($('[node-type=qr-btn]')); });

1
2
3
4
    //初始化扫描二维码按钮,传入自定义的 node-type 属性
    $(function() {
        Qrcode.init($('[node-type=qr-btn]'));
    });

首要代码解析

<pre code_snippet_id="1562226" snippet_file_name="blog_20160122_1_1027181" name="code" class="javascript">(function($) { var Qrcode = function(tempBtn) { var _this_ = this; var isWeiboWebView = /__weibo__/.test(navigator.userAgent); if (isWeiboWebView) { if (window.WeiboJSBridge) { _this_.bridgeReady(tempBtn); } else { document.addEventListener('WeiboJSBridgeReady', function() { _this_.bridgeReady(tempBtn); }); } } else { _this_.nativeReady(tempBtn); } }; Qrcode.prototype = { nativeReady: function(tempBtn) { $('[node-type=jsbridge]',tempBtn).on('click',function(e){ e.stopPropagation(); }); $(tempBtn).bind('click',function(e){ $(this).find('input[node-type=jsbridge]').trigger('click'); }); $(tempBtn).bind('change', this.getImgFile); }, bridgeReady: function(tempBtn) { $(tempBtn).bind('click', this.weiBoBridge); }, weiBoBridge: function() { window.WeiboJSBridge.invoke('scanQPAJEROCode', null, function(params) { //获得扫码的结果 $('.result-qrcode').append(params.result '<br/>'); }); }, getImgFile: function() { var _this_ = this; var inputDom = $(this).find('input[node-type=jsbridge]'); var imgFile = inputDom[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新莆京娱乐app,/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(oFR伊夫nt) { qrcode.decode(oFR伊芙nt.target.result); qrcode.callback = function(data) { //得到扫码的结果 $('.result-qrcode').append(data '<br/>'); }; }; oFReader.readAsDataU君越L(oFile); }, destory: function() { $(tempBtn).off('click'); } }; Qrcode.init = function(tempBtn) { var _this_ = this; tempBtn.each(function() { new _this_($(this)); }); }; window.Qrcode = Qrcode; })(window.Zepto ? Zepto : jQuery);</pre><br><br>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<pre code_snippet_id="1562226" snippet_file_name="blog_20160122_1_1027181" name="code" class="javascript">(function($) {  
    var Qrcode = function(tempBtn) {  
        var _this_ = this;  
        var isWeiboWebView = /__weibo__/.test(navigator.userAgent);  
 
        if (isWeiboWebView) {  
            if (window.WeiboJSBridge) {  
                _this_.bridgeReady(tempBtn);  
            } else {  
                document.addEventListener('WeiboJSBridgeReady', function() {  
                    _this_.bridgeReady(tempBtn);  
                });  
            }  
        } else {  
            _this_.nativeReady(tempBtn);  
        }  
    };  
 
    Qrcode.prototype = {  
        nativeReady: function(tempBtn) {  
            $('[node-type=jsbridge]',tempBtn).on('click',function(e){  
                e.stopPropagation();  
            });  
 
            $(tempBtn).bind('click',function(e){  
                $(this).find('input[node-type=jsbridge]').trigger('click');  
            });  
 
            $(tempBtn).bind('change', this.getImgFile);  
        },  
        bridgeReady: function(tempBtn) {  
            $(tempBtn).bind('click', this.weiBoBridge);  
        },  
        weiBoBridge: function() {  
            window.WeiboJSBridge.invoke('scanQRCode', null, function(params) {  
                //得到扫码的结果  
                $('.result-qrcode').append(params.result '<br/>');  
            });  
        },  
        getImgFile: function() {  
            var _this_ = this;  
            var inputDom = $(this).find('input[node-type=jsbridge]');  
            var imgFile = inputDom[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) {  
                    //得到扫码的结果  
                    $('.result-qrcode').append(data '<br/>');  
                };  
            };  
 
            oFReader.readAsDataURL(oFile);  
        },  
        destory: function() {  
            $(tempBtn).off('click');  
        }  
    };  
 
    Qrcode.init = function(tempBtn) {  
        var _this_ = this;  
 
        tempBtn.each(function() {  
            new _this_($(this));  
        });  
    };  
    window.Qrcode = Qrcode;  
})(window.Zepto ? Zepto : jQuery);</pre><br><br>

 

web端恐怕是 h伍端可以直接到位扫码的行事;

样例展示

3、缺点:

1.呼起前的页面

新莆京娱乐app 6

图表不清楚很轻巧解析失利(拍照扫描图片必要镜头离二维码的相距很近),相对于 native 呼起的照相头解析会有一-二秒的延时。

2.呼起后的页面

新莆京娱乐app 7

打赏扶助自个儿写出更加多好小说,多谢!

打赏作者

说明:

打赏援助本身写出越多好小说,多谢!

任选1种支付格局

新莆京娱乐app 8 新莆京娱乐app 9

1 赞 7 收藏 评论

此插件要求协作zepto.js 或然 jQuery.js使用

关于小编:zhiqiang21

新莆京娱乐app 10

做以为对的业务,假若大概是错的,那就做感觉自身承受得起的事情! 个人主页 · 作者的稿子 · 11 ·      

新莆京娱乐app 11

动用办法:

壹、在急需运用的页面依照下边顺序引进lib目录下的 js 文件

2、自定义按键的 html 样式

为自定义的开关加多自定义属性,属性名字为node-type

为 input 按键增添自定义的性质, 属性名称叫node-type

因为该插件须求运用 ,该 html 结构在网页上边是有定位的展现样式,为了能够自定义开关样式,我们可以依照上面包车型大巴示范代码结构嵌套代码

举目4望二维码一

然后设置 input 按键的 css 隐藏开关,举例自个儿使用的是性质采取器

input[node-type=jsbridge]{

display:none;

}

此处大家只须求依据本身的需求定义的体裁就能够。

叁、在页面上初步化 Qrcode 对象

//初阶化扫描二维码按键,传入自定义的 node-type 属性

$(function() {

Qrcode.init($('[node-type=qr-btn]'));

});

首要代码解析

(function {

var Qrcode = function {

var _this_ = this;

var isWeiboWebView = /__weibo__/.test(navigator.userAgent);

本文由新浦京81707con发布于功能介绍,转载请注明出处:Html5实现二维码扫描并解析,扣丁学堂简述HTML5打

关键词: 新浦京81707con HTML5 优缺点 功能 手机

上一篇:MVVM应用程序,GUI应用程序架构的十年变迁

下一篇:没有了