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

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

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

识别二维码

条形码解析:

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

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

........

  1. //          , 'code_39_reader','code_128_reader',"ean_reader",
  2.              decoder: {
  3.                  readers: [{
  4.                      format: ['ean_reader'], //条形码种类很多,选择适合自己的
  5.                      config: {}
  6.                  }]
  7.              },

　　........

二维码解析:

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

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

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

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

  1. <!DOCTYPE html>
  2. < html>
  3. < head>
  4.      <meta charset="UTF-8"/>
  5.      <title>index</title>
  6.      <meta name="viewport"
  7.            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
  8.      <meta name="apple-mobile-web-app-capable" content="yes"/>
  9.      <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  10.      <meta name="mobile-web-app-capable" content="yes"/>
  11.      <meta name="format-detection" content="telephone=no">
  12.      <meta http-equiv="pragma" content="no-cache">
  13.      <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
  14. < /head>
  15. < body>
  16. < style>
  17.      input{
  18.          display: block;
  19.          width: 100px;
  20.          height: 60px;
  21.          background: red;
  22.          color: white;
  23.          font-size: 16px;
  24.          line-height: 60px;
  25.          outline: none;
  26.          border: 0;
  27.      }
  28. < /style>
  29.  
  30. <input id="pictureB_file" accept="image/*" type="file" capture="camera" name="pictureA_file"/>
  31. < input id="pictureC_file" type="file" name="pictureA_file"/>
  32. < script>
  33.      var u = navigator.userAgent, app = navigator.appVersion;
  34.      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
  35.      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  36.      //alert('是否是Android：'+isAndroid);
  37.      //alert('是否是iOS：'+isiOS);
  38.      if (isAndroid) {
  39.          //如果是安卓手机，就弹框是选择图片还是拍照
  40.          $(".tankuang").css("display", "block");
  41.      } else {
  42.          //如果是苹果系统，就还照之前的样子去操作即可
  43.          //$($("#pictureA_file")[0]).click();
  44.      }
  45. < /script>
  46. < /body>
  47. < /html>

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

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

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

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

  1. html5调用手机本地摄像头和相册识别二维码详细实现过程

    项目中有用到h5识别我们的单据,单据上面有二维码. 实现的场景就是业务人员扫码 类似以下场景  业务员拿到单据以后,直接可以扫码进入相关单据业也可以 输入二维码下方的号码进行识别 下面是h5的页面构造 ...

  2. ios 中生成二维码和相册中识别二维码

    iOS 使用CIDetector扫描相册二维码.原生扫描 原生扫描 iOS7之后,AVFoundation让我们终于可以使用原生扫描进行扫码了(二维码与条码皆可)AVFoundation可以让我们从设 ...

  3. day111:MoFang:邀请好友流程&生成邀请好友二维码&第三方应用识别二维码&本地编译测试&记录邀请人信息

    目录 1.邀请业务逻辑流程图 2.邀请好友-前端 3.邀请好友-后端接口(生成二维码) 4.前端获取后端生成的二维码 5.前端长按页面,保存图片到相册 6.客户端通过第三方识别微信二维码,服务端提供对 ...

  4. iOS--iOS7摄像头识别二维码功能

    iOS–iOS7摄像头识别二维码功能 属性介绍: AVFoundation 框架基于以下几个类实现图像捕捉 ,通过这些类可以访问来自相机设备的原始数据并控制它的组件. AVCaptureDevice ...

  5. python3 树莓派 + usb摄像头 做颜色识别 二维码识别

    今天又啥也没干 我完蛋了哦  就是没办法沉下心来,咋办....还是先来条NLP吧.. 七,凡事必有至少三个解决方法 对事情只有一个方法的人,必陷入困境,因为别无选择. 对事情有两个方法的人也陷入困境, ...

  6. js实现生成中间带图片的二维码

    之前需要实现生成中间带图片的二维码,所以找了半天终于找到一个可以用的.于是在这里记录一下. 下面是需要注意的几点: 1.使用的js为jquery-qrcode 但是已经经过别人的修改,和网上原来的那些 ...

  7. 移动端禁止图片长按和vivo手机点击img标签放大图片,禁止长按识别二维码或保存图片【转载】

    移动端禁止图片长按和vivo手机点击img标签放大图片,禁止长按识别二维码或保存图片 img{ pointer-events: none; } 源文地址:https://www.cnblogs.com ...

  8. js 识别二维码

    本文引用analyticCode.js.llqrcode.js实现识别二维码功能 html代码: <div class="box" id="analytic&quo ...

  9. c# winform调用摄像头识别二维码

    首先我们需要引用两个第三方组件:AForge和zxing. Aforge是摄像头操作组件,zxing是二维码识别组件.都是开源项目.避免重复造轮子. 其实一些操作代码我也是参照别人的,若侵犯您的版权, ...

随机推荐

  1. 把一张图片变成base64

    // image_file可为urlprivate function base64EncodeImage($image_file) { $image_info = getimagesize($imag ...

  2. Solve Error: Unhandled exception at 0x00905a4d in xxx.exe: 0xC0000005: Access violation.

    在使用Visual Studio进行项目开发的时候,有时候会遇到下面这个错误: Unhandled exception at 0x00905a4d in xxx.exe: 0xC0000005: Ac ...

  3. 在elementUI中使用 el-autocomplete 实现远程搜索的下拉框

    参考;https://blog.csdn.net/qq_37746973/article/details/78402812?utm_source=blogxgwz1 https://blog.csdn ...

  4. 使用call、apply和bind解决js中烦人的this，事件绑定时的this和传参问题

    1.什么是this 在JavaScript中this可以是全局对象.当前对象或者任意对象,这完全取决于函数的调用方式,this 绑定的对象即函数执行的上下文环境(context). 为了帮助理解,让我 ...

  5. 好用的Quartz管理器类

    转发的代码,原理就不提了 下面直接上代码: QuartzManager.java 动态添加.修改和删除定时任务管理类 import org.quartz.CronScheduleBuilder; im ...

  6. ArcGIS AddIN Sample学习笔记

    1.AddInEditorExtension 功能描述:编辑器扩展,实现在编辑要素,对编辑事件的监听,及对新创建的要素的处理 核心代码: void Events_OnStartEditing() { ...

  7. 剑指offer——python【第37题】数字在排序数组中出现的次数

    题目描述 统计一个数字在排序数组中出现的次数 思路 最贱的方法依旧是count计数.. 当然,,看到有序数组就应该想到二分法,找到重复数字左边和右边的数字,然后两个相减就可以了 解答 方法1 coun ...

  8. [ERROR] - Error reading string. Unexpected token: StartObject. Path 'formData', line 1, position 13.

    公司流程框架: businessData 为 string 所有要使用JSON.stringify();

  9. php 命令行参数

    getopt (PHP 4 >= 4.3.0, PHP 5, PHP 7) getopt — 从命令行参数列表中获取选项 说明 array getopt ( string $options [, ...

  10. com.mysql.jdbc.Driver 与 org.gjt.mm.mysql.Driver的区别

    com.mysql.jdbc.Driver的前身是org.gjt.mm.mysql.Driver,现在主要用com.mysql.jdbc.Driver,但为了保持兼容性保留了org.gjt.mm.my ...