JS实现扫码枪扫描二维码功能

2024-12-01 03:34:23

扫码枪扫描二维码，具体内容如下所示：

业务需求要将数据生成二维码，并用扫码枪扫出数据上传到服务端。

先上代码吧，之后再完善注意点

this.start = new Date().getTime()
  let code = ''
  let lastTime, nextTime
  let lastCode, nextCode
  let that = this
  window.document.onkeypress = function (e) {
   if (window.event) { // IE
    nextCode = e.keyCode
   } else if (e.which) { // Netscape/Firefox/Opera
    nextCode = e.which
   }
   console.time()
   console.log('nextCode', nextCode)
   if (e.which === 13) {
    if (code.length < 3) return // 手动输入的时间不会让code的长度大于2，所以这里只会对扫码枪有
    console.log(code)
    console.log('扫码结束')
    console.timeEnd()
    that.parseQRCode(code) // 获取到扫码枪输入的内容，做别的操作
    code = ''
    lastCode = ''
    lastTime = ''
    return
   }
   nextTime = new Date().getTime()
   if (!lastTime && !lastCode) {
    console.log('扫码开始。。。')
    code += e.key
   }
   if (lastCode && lastTime && nextTime - lastTime > 500) { // 当扫码前有keypress事件时,防止首字缺失
    console.log('防止首字缺失。。。')
    code = e.key
   } else if (lastCode && lastTime) {
    console.log('扫码中。。。')
    code += e.key
   }
   lastCode = nextCode
   lastTime = nextTime
  }

总结

以上所述是小编给大家介绍的JS实现扫码枪扫描二维码功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

js微信扫描二维码登录网站技术原理

微信扫描二维码登录网站是微信开放平台下网站应用的一种接口实现的功能.微信开放平台的网址是https://open.weixin.qq.com 准备工作网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统. 在进行微信OAuth2.在进行微信OAuth2.0授权登录接入之前,在微信开放平台注册开发者帐号,并拥有一个已审核通过的网站应用,并获得相应的AppID和AppSecret,申请微信登录且通过审核后,可开始接入流程. 授权流程说明微信OAuth2.0授权登录
JS调用安卓手机摄像头扫描二维码

项目要求: 使用H5模仿微信扫一扫付款功能经过一系列的查找最后发现可以使用 JS调用手机摄像头然后用画布把当前摄像头的数据转成Base64的png图片,经过QrCode直接再本地识别. 优点: 兼容大多数浏览器本地识别不占用服务端资源代码比较简单只有一个页面 <html lang="ZH-CN"> <head> <meta charset="utf-8"> <title>Web QrCode Test</t
JS实现扫码枪扫描二维码功能

扫码枪扫描二维码,具体内容如下所示: 业务需求要将数据生成二维码,并用扫码枪扫出数据上传到服务端. 先上代码吧,之后再完善注意点 this.start = new Date().getTime() let code = '' let lastTime, nextTime let lastCode, nextCode let that = this window.document.onkeypress = function (e) { if (window.event) { // IE nextC
js中调用微信的扫描二维码功能的实现代码

关键代码 <html> <head> <title> js调用微信扫一扫功能测试 </title>  <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>  <script t
Android studio 实现手机扫描二维码功能

安卓手机版本在6.0以后需要动态获取相机权限 1.获取相机权限  <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.FLASHLIGHT" /> 2.添加依赖 implementation 'cn.yipianfengye.a
Android实现扫描二维码功能

本文实例为大家分享了Android实现扫描二维码的具体代码,供大家参考,具体内容如下 1.效果图: 2.引用公共库:builder.radle,在app目录下 implementation 'com.google.android.gms:play-services-maps:17.0.0' implementation 'com.google.android.gms:play-services-vision:19.0.0' implementation 'com.google.android.g
iOS 原生实现扫描二维码和条形码功能限制扫描区域

现在苹果iOS系统已经原生支持了二维码扫描的功能,使用原生来扫描需要导入AVFoundation. 扫描准备一.获取摄像设备: device = AVCaptureDevice.defaultDevice(withMediaType: AVMediaTypeVideo) 二.创建输入流 do { try input = AVCaptureDeviceInput(device: device) } catch let e as NSError { print(e.localizedDescrip
使用JS 插件qrcode.js生成二维码功能

效果图: qrcode.js这是一个使用比较多的js生成二维码的插件,使用也很方便,第一次用,记录一下使用方法: 首先,导入js,这个网上可以找到,附上地址:https://github.com/davidshimjs/qrcodejs/ jsp: <script type="text/javascript" src="<%=basePath %>bootstrap/js/qrcode.js" charset="UTF-8"&g
Android 二维码扫描和生成二维码功能

在APP开发中,常遇到二维码扫描功能和生成二维码的需求.Android大部分是集成了zxing这个开源项目的扫码功能. 开源项目地址下面给大家介绍一下具体的集成步骤集成步骤参考demo 1.demo展示如下: 1.1demo首页 1.2扫描界面可以根据需求修改,我实际项目中界面截图如下: 1.3生成二维码 2.引入文件 2.1 下载demo,拷贝demo中的com.google.zxing5个包和com.utils包引入到自己的项目中. 2.2 拷贝本项目demo中的布局activity
iOS中使用ZBar扫描二维码自定义扫描界面功能

之前在Android中使用过ZXing识别二维码,ZXing也有对应的iOS版本,经过了解,ZBar也是一个常用的二维码识别软件,并分别提供了iOS和Android的SDK可供使用,最终我选择了ZBar进行二维码识别,它的注释清晰,便于使用. ZBar为我们提供了两种使用方式,一种是直接调用ZBar提供的ZBarReaderViewController打开一个扫描界面,另一种方式是使用ZBar提供的可以嵌在其他视图中的ZBarReaderView,实际项目中我们更可能会使用第二种方式,这可以让我
使用jquery.qrcode.min.js实现中文转化二维码

今天还是要讲一下关于二维码的知识,前几篇讲解中有讲到我使用的可以生成二维码的js是qrcode.js,然后结合Cordovad的插件$cordovaBarcodeScanner插件可以扫描二维码,这样就基本完成了简单的扫一扫功能.后来在项目进行,开始要调用后台数据和传参数到接口的时候发现qrcode.js它只能解析英文或者数字,并且只能解析一个字符串! 而我所需要的是将一个对象转化成二维码,然后在扫描的时候取出对象中的数据,显然qrcode.js不能实现,经过查找,找到另一个jquery.qrc

JS实现扫码枪扫描二维码功能

相关推荐

随机推荐