您的位置:澳门新葡8455最新网站 > Web前端 > Html5实现二维码扫描并解析,H5端呼起摄像头扫描

Html5实现二维码扫描并解析,H5端呼起摄像头扫描

发布时间:2019-12-31 04:27编辑:Web前端浏览(145)

    H5端呼起摄像头扫描二维码并解析

    2016/01/22 · HTML5 · 二维码

    正文我: 伯乐在线 - zhiqiang21 。未经作者许可,禁绝转发!
    招待参与伯乐在线 专辑审核人。

    Html5落到实处二维码扫描并深入分析,html5深入分析

    引子:
    近年来商家项目有个须要,和讯客商端中, h5 的页面上的有些开关能够与native 人机联作呼起录像头,扫描二维码何况剖析。在非搜狐顾客端中(Wechat仍然是原生浏览器,如:safari)呼起系统的摄像或然上传图片按钮,通过摄像恐怕上传图片解析二维码。
    其次种方案必要在前端 js 深入分析二维码。这样依靠一个第三方的拆解深入分析库jsqrcode。那个库已经帮忙在浏览器端呼起录像头的操作了,但是借助二个叫getUserMedia的性情。该属性移动端的浏览器协助的都不是很好,所以只好直接的上传图片的主意解析二维码。
    getUserMedia属性宽容浏览器列表:

    图片 1

    率先多谢 jsqrcode 的开荒者,提供那样美观的解析二维码的代码,为自家压缩了不小的专门的学业量。jsqrcode 地址:点笔者
    自个儿的代码库地址:点本身
    1.缓慢解决的难点:
    1.可见在今日头条顾客端呼起录像头扫描二维码况兼深入深入分析;
    2.能够在原生浏览器和Wechat客商端中围观二维码何况拆解分析;
    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

    2.呼起后的页面

    图片 3

    引子: 方今厂商项目有个供给,新浪客户端中, h5 的页面上的有些开关能够与native 交互作用呼起录制头...

    2016年6月29日补充:

    方今做了黄金年代部分与表单相关的门类,使用了h5的input控件,在应用进程中遇见了过多的坑。也包括与那篇小说相关的。

    率先大家理应明了使用h5新提供的属性getUserMedia以此个性,是能够调取系统的摄像头进行摄像恐怕是水墨画的,可是包容性协助的倒霉,所以当大家必要获得系统的多媒体权限制期限大家都不会接纳这本特性。

    使用<input type="file">标签我们得以直接的呼起系统筛选文件的窗口,来读取系统文件。然而在WebView中,因为安卓权限的难题,大家是不可能直接获取读取文件那一个操作的。而在原生的浏览器中是荒诞不经此个主题材料的。所以选拔接纳这一个input的时候断定要在意和谐的页面是第一运行在webview中大概浏览器中。如若注意运维在客户端的webvie中,是内需客商端的同桌支持的。

    在IOS的一些系统版本中也会冒出那么些难题。具体的可以参见下边包车型地铁参阅作品。
    参谋文章:

    引子:

    后天供销合作社项目有个必要,今日头条顾客端中, h5 的页面上的有个别开关能够与native 人机联作呼起录制头,扫描二维码並且分析。在非今日头条客商端中(Wechat恐怕是原生浏览器,如:safari)呼起系统的照相或然上传图片开关,通过水墨画可能上传图片拆解剖判二维码。

    第二种方案供给在前面五个 js 剖判二维码。那样依附二个第三方的剖析库jsqrcode。这些库已经支撑在浏览器端呼起录像头的操作了,不过依赖一个叫getUserMedia的习性。该属性移动端的浏览器援救的都不是很好,所以只可以直接的上传图片的艺术深入分析二维码。

    getUserMedia品质宽容浏览器列表:
    图片 4

    第生机勃勃感激 jsqrcode 的开采者,提供这么精美的解析二维码的代码,为本身压缩了不小的职业量。jsqrcode 地址:点我

    自己的代码库地址:点我

    1.化解的标题:

    1.能够在今日头条客商端呼起摄像头扫描二维码况兼深入分析;
    2.力所能致在原生浏览器和Wechat客商端中围观二维码况兼解析;

    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>

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

    2.自定义开关的 html 样式

    为自定义的按键加多自定义属性,属性名为node-type
    为 input 开关增添自定义的性质, 属性名叫node-type

    因为该插件必要接收 style="font-family: 'Courier 10 Pitch', Courier, monospace;font-size: 12px;background-color: #f4f4f4"><input type=”file” /> ,该 html 构造在网页上边是有定位的显得样式,为了能够自定义按键样式,大家能够死守上面包车型客车演示代码构造嵌套代码

    <div> <div class="qr-btn" node-type="qr-btn">扫描二维码1 <input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码1" /> </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 对象

    //发轫化扫描二维码按键,传入自定义的 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'卡塔尔国; }卡塔尔国; $(tempBtnState of Qatar.bind('change', this.getImgFile卡塔尔; }, bridgeReady: function(tempBtnState of Qatar { $(tempBtn卡塔尔(قطر‎.bind('click', this.weiBoBridgeState of Qatar; }, weiBoBridge: function(State of Qatar { window.WeiboJSBridge.invoke('scanQRCode', null, function(params卡塔尔国 { //获得扫码的结果 $('.result-qrcode'State of Qatar.append(params.result + '<br/>'卡塔尔(قطر‎; }State of Qatar; }, getImgFile: function(State of Qatar { 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(oF路虎极光Event卡塔尔 { qrcode.decode(oF奥迪Q3伊夫nt.target.result卡塔尔(قطر‎; qrcode.callback = function(data卡塔尔 { //得到扫码的结果 $('.result-qrcode'卡塔尔.append(data + '<br/>'卡塔尔(قطر‎; }; }; oFReader.readAsDataUMuranoL(oFile卡塔尔; }, destory: function(State of Qatar { $(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>

     

    样例体现

    1.呼起前的页面

    图片 5

    2.呼起后的页面

    图片 6

    打赏支持本身写出越多好小说,谢谢!

    打赏小编

    打赏支持小编写出越多好文章,多谢!

    任选朝气蓬勃种支付办法

    图片 7 图片 8

    1 赞 7 收藏 评论

    关于小编:zhiqiang21

    图片 9

    做认为没错事体,若是也许是错的,那就做以为本身负责得起的专门的学问! 个人主页 · 作者的篇章 · 11 ·      

    图片 10

    本文由澳门新葡8455最新网站发布于Web前端,转载请注明出处:Html5实现二维码扫描并解析,H5端呼起摄像头扫描

    关键词:

上一篇:前端优化,2017前端性能优化清单

下一篇:没有了