使用JS调用手机本地摄像头或者相册图片识别二维码/条形码

接着昨天的需求,不过这次不依赖微信,使用纯js唤醒手机本地摄像头或者选择手机相册图片,识别其中的二维码或者是条形码.昨天,我使用微信扫一扫识别,效果超棒的.不过如果依赖微信的话,又怎么实现呢,这里介绍两个js库,都很牛掰,感谢大神,献上链接.

仓库:https://github.com/serratus/quaggaJS

官网: https://serratus.github.io/quaggaJS/

识别二维码

条形码解析:

我也是在网上找了一大堆,都失败了,别人博主写的都没头没尾的,无法实现其功能,既然有工具就一梭子的事情了,花费了一晚上,终于弄出来了,下面就是设置参数的问题了

甩出一个仓库,大家下载这个仓库就可以实现此功能的,不过条形码识别的准确性有点问题.需要设置对应的参数,其中需要修改代码

........

//          , 'code_39_reader','code_128_reader',"ean_reader", 
             decoder: {
                 readers: [{
                     format: ['ean_reader'], //条形码种类很多,选择适合自己的
                     config: {}
                 }]
             },

 　　........

 

 

二维码解析:

这个没找到开源仓库,不过找到一个可以实现的DMEO,大家喜欢的话可以自己深究,我要去撸代码了.

我的仓库实例地址: https://gitee.com/guyandog/QR_BR 传送门

收集不易,点赞鼓励,谢谢

 

PS: 我这里是识别静态图片,如果是需要手机打开摄像头的,将input中添加这样的属性,如下:

 

<!DOCTYPE html>
< html>
< head>
     <meta charset="UTF-8"/>
     <title>index</title>
     <meta name="viewport"
           content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
     <meta name="apple-mobile-web-app-capable" content="yes"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
     <meta name="mobile-web-app-capable" content="yes"/>
     <meta name="format-detection" content="telephone=no">
     <meta http-equiv="pragma" content="no-cache">
     <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
< /head>
< body>
< style>
     input{
         display: block;
         width: 100px;
         height: 60px;
         background: red;
         color: white;
         font-size: 16px;
         line-height: 60px;
         outline: none;
         border: 0;
     }
< /style>

<input id="pictureB_file" accept="image/*" type="file" capture="camera" name="pictureA_file"/>
< input id="pictureC_file" type="file" name="pictureA_file"/>
< script>
     var u = navigator.userAgent, app = navigator.appVersion;
     var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
     var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
     //alert('是否是Android：'+isAndroid);
     //alert('是否是iOS：'+isiOS);
     if (isAndroid) {
         //如果是安卓手机，就弹框是选择图片还是拍照
         $(".tankuang").css("display", "block");
     } else {
         //如果是苹果系统，就还照之前的样子去操作即可
         //$($("#pictureA_file")[0]).click();
     }
< /script>
< /body>
< /html>

参考网站:(感谢这些博客的博主)

https://www.zhangshengrong.com/p/2EaE0WdO1M/

http://www.cnblogs.com/yaotome/p/9450274.html

posted @ 2019-02-14 14:16  孤燕南飞  阅读(13461)  评论(14)  编辑  收藏  举报