h5打开手机扫码功能

12 篇文章 0 订阅
10 篇文章 0 订阅

转载至:http://div.io/topic/1562

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 样式
为自定义的按钮添加自定义属性,属性名称为node-type
为 input 按钮添加自定义的属性, 属性名称为node-type

因为该插件需要使用<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>

然后设置 input 按钮的 css 隐藏按钮,比如我使用的是属性选择器

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

这里我们只需要按照自己的需要定义class="qr-btn"的样式即可。

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

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

主要代码解析

(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);


  • 1
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
H5中实现扫码功能,可以使用HTML5的API:getUserMedia和Canvas。具体步骤如下: 1.在HTML中添加一个video标签和一个canvas标签,用于显示摄像头捕获的图像和绘制解码后的条形码。 2.使用JavaScript获取video和canvas元素,并调用getUserMedia方法请求用户授权访问摄像头。 3.在getUserMedia的回调函数中,将摄像头捕获的图像绘制到canvas上,并使用Quagga.js库对图像进行解码,获取条形码数据。 4.将解码后的条形码数据填入输入框中。 下面是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>扫码录入</title> </head> <body> <video id="video" width="640" height="480" autoplay></video> <canvas id="canvas" width="640" height="480"></canvas> <input id="input" type="text" placeholder="扫码结果"> <script src="https://cdn.bootcdn.net/ajax/libs/quagga/0.12.1/quagga.min.js"></script> <script> // 获取video和canvas元素 var video = document.getElementById('video'); var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // 请求用户授权访问摄像头 navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) { video.srcObject = stream; video.play(); }).catch(function(err) { console.log('访问摄像头失败:', err); }); // 监听video的canplay事件,开始绘制图像 video.addEventListener('canplay', function() { setInterval(function() { ctx.drawImage(video, 0, 0, canvas.width, canvas.height); // 解码条形码 Quagga.decodeSingle({ src: canvas.toDataURL(), numOfWorkers: 0, decoder: { readers: ['ean_reader'] }, locate: true }, function(result) { if (result && result.codeResult) { // 将解码结果填入输入框 document.getElementById('input').value = result.codeResult.code; } }); }, 100); }, false); </script> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值