H5端呼起视频头扫描二维码并分析,天涯论坛客户端

H5端呼起视频头扫描二维码并分析

2016/01/22 · HTML5 ·
二维码

本文作者: 伯乐在线 –
zhiqiang21
。未经小编许可,禁止转发!
欢迎参加伯乐在线 专辑小编。

Html5已毕二维码扫描并分析,html5剖析

引子:
近年合营社项目有个要求,和讯客户端中, h5 的页面上的某部按钮可以与native
交互呼起视频头,扫描二维码并且解析。在非新浪客户端中(微信照旧是原生浏览器,如:safari)呼起系统的拍摄或者上传图片按钮,通过视频或者上传图片解析二维码。
第三种方案要求在前者 js
解析二维码。那样借助一个第三方的剖析库jsqrcode。这些库已经支撑在浏览器端呼起视频头的操作了,不过依靠一个叫getUserMedia的性质。该属性移动端的浏览器匡助的都不是很好,所以只能直接的上传图片的办法分析二维码。
getUserMedia属性包容浏览器列表:

亚洲必赢官网 1

率先感谢 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) {
H5端呼起视频头扫描二维码并分析,天涯论坛客户端。//该目的只辅助博客园域下的辨析,也就是说不是博客园域下的页面只可以用第两种方案分析二维码
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
交互呼起视频头…

h5端呼起视频头扫描二维码并分析

引子:

近些年合营社项目有个须求,博客园客户端中, h5
的页面上的某部按钮可以与native互相呼起视频头,扫描二维码并且解析。在非新浪客户端中(微信或者是原生浏览器,如:safari)呼起系统的照相或者上传图片按钮,通过拍摄或者上传图片解析二维码。

其次种方案需求在前端 js
解析二维码。那样借助一个第三方的解析库jsqrcode。这几个库已经支撑在浏览器端呼起视频头的操作了,可是依靠一个叫getUserMedia的质量。该属性移动端的浏览器接济的都不是很好,所以只好直接的上传图片的章程分析二维码。

getUserMedia特性包容浏览器列表:
亚洲必赢官网 4

率先感谢jsqrcode的开发者,提供那样可以的剖析二维码的代码,为本人压缩了很大的工作量。jsqrcode
地址:点我

自我的代码库地址:点我

2016年6月29日补充:

近日做了有的与表单相关的花色,使用了h5的input控件,在动用进程中碰到了广大的坑。也席卷与那篇文章相关的。

率先大家应有领悟使用h5新提供的质量getUserMedia其一特性,是足以调取系统的视频头举行拍照或者是拍照的,可是包容性帮衬的不好,所以当大家必要得到系统的多媒体权限时大家都不会利用那么些特性。

使用<input type="file">标签大家可以直接的呼起系统挑选文件的窗口,来读取系统文件。然而在WebView中,因为安卓权限的标题,我们是不能直接获取读取文件那一个操作的。而在原生的浏览器中是不设有那么些题材的。所以拔取使用那一个input的时候一定要留意协调的页面是非同一般运行在webview中或者浏览器中。如若留意运行在客户端的webvie中,是急需客户端的同班援救的。

在IOS的一点系统版本中也会师世这一个难题。具体的可以参考下边的参阅作品。
参照小说:

引子:

前不久合营社项目有个必要,天涯论坛客户端中, h5
的页面上的某个按钮可以与native相互呼起视频头,扫描二维码并且解析。在非和讯客户端中(微信依旧是原生浏览器,如:safari)呼起系统的照相或者上传图片按钮,通过摄像或者上传图片解析二维码。

第两种方案必要在前者 js
解析二维码。这样借助一个第三方的解析库jsqrcode。这些库已经支撑在浏览器端呼起视频头的操作了,不过依靠一个叫getUserMedia的习性。该属性移动端的浏览器支持的都不是很好,所以只好直接的上传图片的法子分析二维码。

getUserMedia特性包容浏览器列表:
亚洲必赢官网 5

率先感谢jsqrcode的开发者,提供那样可以的剖析二维码的代码,为本人压缩了很大的工作量。jsqrcode
地址:点自己

我的代码库地址:点自己

1.解决的标题:

1.可见在微博客户端呼起视频头扫描二维码并且解析;
2.可见在原生浏览器和微信客户端中围观二维码并且解析;

引子:

近年来铺面项目有个必要,天涯论坛客户端中, h5
的页面上的某个按钮能够与native 交互呼起视频头,扫描二维码并且解析。在非今日头条客户端中(微信或者是原生浏览器,如:safari)呼起系统的拍照或者上传图片按钮,通过壁画或者上传图片解析二维码。

其次种方案要求在前者 js
解析二维码。那样借助一个第三方的解析库jsqrcode。这一个库已经支撑在浏览器端呼起视频头的操作了,不过依靠一个叫getUserMedia的特性。该属性移动端的浏览器帮助的都不是很好,所以不得不直接的上传图片的艺术分析二维码。

getUserMedia属性包容浏览器列表:
亚洲必赢官网 6

率先感谢 jsqrcode 的开发者,提供这么能够的剖析二维码的代码,为自身压缩了很大的工作量。jsqrcode
地址:点我

本身的代码库地址:点我

1.解决的题材:

1.可见在搜狐客户端呼起视频头扫描二维码并且解析;
2.力所能及在原生浏览器和微信客户端中围观二维码并且解析;

2.优点:

web端或者是 h5端可以间接到位扫码的行事;

1.化解的标题:

1.能够在博客园客户端呼起视频头扫描二维码并且解析;
2.可见在原生浏览器和微信客户端中围观二维码并且解析;

2.优点:

web端或者是 h5端能够一向达成扫码的工作;

3.缺点:

图表不清楚很不难解析败北(拍照扫描图片要求镜头离二维码的相距很近),相对于native呼起的留影头解析会有1-2秒的延时。

2.优点:

web端或者是 h5端可以平素落成扫码的劳作;

3.缺点:

图形不明晰很简单解析失败(拍照扫描图片须要镜头离二维码的离开很近),相对于native呼起的视频头解析会有1-2秒的延时。

说明:

此插件必要同盟zepto.js或者jQuery.js使用

3.缺点:

图形不明晰很简单解析失利(拍照扫描图片须要镜头离二维码的偏离很近),相对于 native 呼起的摄像头解析会有1-2秒的延时。

说明:

此插件须要般配zepto.js或者jQuery.js使用

使用办法:

1.在须要使用的页面依照上面顺序引入lib目录下的 js 文件

<code class="sourceCode javascript hljs">    <!--{cke_protected}%3Cscript%20src%3D%22lib%2Fzepto.js%22%3E%3C%2Fscript%3E-->
    <!--{cke_protected}%3Cscript%20src%3D%22lib%2Fqrcode.lib.min.js%22%3E%3C%2Fscript%3E-->
    <!--{cke_protected}%3Cscript%20src%3D%22lib%2Fqrcode.js%22%3E%3C%2Fscript%3E--></code>

2.自定义按钮的 html 样式
因为该插件必要使用“,该 html
结构在网页上边是有一定的突显样式,为了可以自定义按钮样式,大家得以遵从下边的以身作则代码结构嵌套代码

<code class="sourceCode html hljs xml">        扫描二维码1
            <input node-type="jsbridge" data-cke-saved-name="myPhoto" name="myPhoto" value="扫描二维码1" data-cke-editable="1" contenteditable="false" type="file">
        </code>

接下来设置input按钮的css隐藏按钮,比如我利用的是性质选拔器

input[node-type=jsbridge]{
    visibility: hidden;
}

此间大家只须求按照自己的要求定义class="qr-btn"的体制即可。

3.在页面上早先化 Qrcode 对象

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

说明:

此插件须要分外zepto.js 或者 jQuery.js使用

利用方法:

1.在须求采取的页面按照上面顺序引入lib目录下的 js 文件

<code class="sourceCode javascript hljs">    <!--{cke_protected}%3Cscript%20src%3D%22lib%2Fzepto.js%22%3E%3C%2Fscript%3E-->
    <!--{cke_protected}%3Cscript%20src%3D%22lib%2Fqrcode.lib.min.js%22%3E%3C%2Fscript%3E-->
    <!--{cke_protected}%3Cscript%20src%3D%22lib%2Fqrcode.js%22%3E%3C%2Fscript%3E--></code>

2.自定义按钮的 html 样式
因为该插件须求利用“,该 html
结构在网页下边是有一定的来得样式,为了可以自定义按钮样式,大家得以依据下边的演示代码结构嵌套代码

<code class="sourceCode html hljs xml">        扫描二维码1
            <input node-type="jsbridge" data-cke-saved-name="myPhoto" name="myPhoto" value="扫描二维码1" data-cke-editable="1" contenteditable="false" type="file">
        </code>

下一场设置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.在需求动用的页面根据上边顺序引入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’); });
$(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(oFR伊芙nt) { qrcode.decode(oFR伊芙nt.target.result);
qrcode.callback = function(data) { //获得扫码的结果
$(‘.result-qrcode’).append(data + ‘<br/>’); }; };
oF里德r.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
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>

 

第一代码解析

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

亚洲必赢官网 7

1.呼起前的页面

亚洲必赢官网 8

1.呼起前的页面

亚洲必赢官网 9

2.呼起后的页面

亚洲必赢官网 10


设若您觉得对您有帮衬,请点击上面的 star 给我一颗星。谢谢啊!

2.呼起后的页面

亚洲必赢官网 11

打赏接济自己写出越来越多好小说,谢谢!

打赏小编

2.呼起后的页面

亚洲必赢官网 12


若果你认为对您有帮扶,请点击上边的 star 给自己一颗星。谢谢啊!

引子:
近期铺面项目有个须要,和讯客户端中, h5 的页面上的某部按钮可以与 native
交互呼起摄像头,扫…

打赏协助自己写出更多好小说,谢谢!

任选一种支付办法

亚洲必赢官网 13
亚洲必赢官网 14

1 赞 7 收藏
评论

关于小编:zhiqiang21

亚洲必赢官网 15

做认为对的工作,假如可能是错的,那就做认为自己接受得起的业务!

个人主页 ·
我的篇章 ·
11 ·
     

亚洲必赢官网 16

网站地图xml地图