使用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

转载于:https://www.cnblogs.com/guyanzy/p/10374332.html

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

ZXing 相册中识别二维码和条形码(直接引用就可以了)
*百度了很久一直没有找到关于相册获取条形码的Demo,真心是醉了,只能苦逼的去自己看闲话不说直接搞起分析: *核心 1,通过路径转换成bitmp对象 2,再bitmap对象转换成二进制图片(二值化 ...
77、基于STM32单片机的超市餐饮二维码/条形码摄像头识别结账扫码系统设计
毕设帮助.开题指导.技术解答(有偿)见文末. 目录摘要一.硬件方案二.设计功能三.实物图四.原理图五.PCB图六.程序源码七.资料包括摘要二维码识别系统是集数据采集,识别,以及显示 ...
js 通过摄像头识别二维码，可以控制闪光灯。原生 HTML 调用摄像头，有原生HTML + JS 版本和 VUE3 + TS 版本与 uniapp 版本
开发背景最开始公司说到这个需求的时候第一个想法是使用微信的 js SDK 接入微信的扫一扫.但是得知所做的这个功能模块是需要嵌入到之前开发的app中,所以就只有使用 js 原生的 API 来开发了. ...
html+js 调用摄像头识别二维码
1. html调起摄像头,参考文档:https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia 2.识别二维码 ...
Zing实现本地相册识别二维码
前言最近公司的项目需要加入本地相册识别二维码的功能,就类似与微信那样.大家都知道二维码识别目前火的一个是Zing,一个就是Zbar,针对于这两个的区别,在此也不再赘述.(PS:网上的资料有很多)由于 ...
C# 调用摄像头实时识别二维码
注释和winform控件自己做,源码需要下载. // 功能:调用zxing生成和解析二维码,调用摄像头根据图片识别二维 using System; using System.Collections.G ...
Vue组件-调用摄像头识别二维码
需要下载的包 @zxing/library@0.18.4 element-ui 可识别类型可识别二维码和大部分条形码,具体请查看zxing 代码文本 /**条码扫描组件使用示例:-- 引入impor ...
WinForm调用摄像头扫码识别二维码
前言因公司业务需求,需要在Windows系统下调用摄像头识别二维码需求,就有了这个功能.根据网上网友提供的一些资料,自己整合应用到项目中,效果还不错(就是感觉像素不是太好).现在将调用摄像头+识别二 ...
opencv之调用摄像头动态识别二维码
结合前几篇做的工作,实现一下动态识别二维码 opencv之调用摄像头动态识别二维码

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

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

最新文章

热门文章