使用quaggaJS识别图片中的条形码
quaggaJS是一个纯JS的插件，用于识别图片中的条形码，很方便。一般用于移动端拍照识别，也可以在网页端上传图片识别。
首先要指定正确格式的条形码，常见的条形码编码类型有EAN和CODE128。
另外，并不是所有图片中的条形码都可以被识别出来，而且正确率也不是100%。
下面是识别网页上传图片中条码的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section id="container" class="container">
<div class="controls">
<fieldset class="input-group">
<input type="file" accept="image/*;capture=camera">
<button id="btnIdents">识别</button>
</fieldset>
</div>
<div id="interactive" class="viewport"><br clear="all"></div>
</section>
<script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.js" type="text/javascript"></script>
<script src="./js/quagga.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/fileinput.css">
<script src="./js/file_input.js" type="text/javascript"></script>
<script type="text/javascript"> $(function() {var App = {
init: function() {
App.attachListeners();
},
attachListeners: function() {
var self = this;
$("#btnIdents").on("click", function(e) {
var input = document.querySelector(".controls input[type=file]");
if (input.files && input.files.length) {
App.decode(URL.createObjectURL(input.files[0]));
}
});
},
decode: function(src) {
var self = this,
config = $.extend({}, self.state, {src: src});
Quagga.decodeSingle(config, function(result) {
//识别结果
if(result.codeResult){
console.log(result.codeResult.code);
alert("图片中的条形码为：" + result.codeResult.code);
}else{
alert("未识别到图片中的条形码！");
}
});
},
state: {
inputStream: {
size: 800,
singleChannel: false
},
locator: {
patchSize: "medium",
halfSample: true
},
decoder: {
readers: [{
format: "code_128_reader",
config: {}
}]
},
locate: true,
src: null
}
}; App.init();
});
</script>
</body>
</html>
运行效果
补充：上面的代码主要是参考了官方的demo，后来又按自己的习惯写了一遍，也贴上来。运行效果是一样的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section id="container" class="container">
<div class="controls">
<fieldset class="input-group">
<input type="file" accept="image/*;capture=camera">
<button id="btnIdents">识别</button>
</fieldset>
</div>
<div id="interactive" class="viewport"><br clear="all"></div>
</section>
<script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.js" type="text/javascript"></script>
<script src="./js/quagga.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/fileinput.css">
<script src="./js/file_input.js" type="text/javascript"></script>
<script type="text/javascript"> $(function() {
$("#btnIdents").click(function() {
var input = document.querySelector(".controls input[type=file]");
if (input.files && input.files.length) {
decode(URL.createObjectURL(input.files[0]));
}
});
}); function decode(src){
var config = {
inputStream: {
size: 800,
singleChannel: false
},
locator: {
patchSize: "medium",
halfSample: true
},
decoder: {
readers: [{
format: "code_128_reader",
config: {}
}]
},
locate: true,
src: src
} Quagga.decodeSingle(config, function(result) {
if(!result){
alert("图片中没有条形码！");
return false;
}
//识别结果
if(result.codeResult){
console.log("图片中的条形码为："+result.codeResult.code);
alert("图片中的条形码为：" + result.codeResult.code);
}else{
alert("未识别到图片中的条形码！");
}
});
} </script>
</body>
</html>
另外，如果不是文件上传的话，可以传图片的url进行识别。
function decode(img_url) {
var config = {
readers: ["code_128_reader"],
locate: true,
src : img_url
}
Quagga.decodeSingle(config, function (result) {
console.log("decoding...");
if (!result) {
console.log("图片中没有条形码！");
return false;
}
//识别结果
if (result.codeResult) {
console.log("图片中的条形码为：" + result.codeResult.code);
} else {
console.log("未识别到图片中的条形码！");
}
});
}
使用quaggaJS识别图片中的条形码的更多相关文章
- Opencv+Zbar二维码识别（标准条形码/二维码识别）
使用Opencv+Zbar组合可以很容易的识别图片中的二维码,特别是标准的二维码,这里标准指的是二维码成像清晰,图片中二维码的空间占比在40%~100%之间,这样标准的图片,Zbar识别起来很容易,不 ...
- 如何用ABBYY FineReader识别图片中的文本
ABBYY FineReader 12是一款OCR光学字符识别软件,能够快速方便地将扫描纸质文档.PDF文件和数码相机的图像转换成可编辑.可搜索的文本,让电脑处理更具效率,摆脱从前的烦恼,告别耗时费力 ...
- Android识别图片中脸部信息
在Android开发中,大部分应用都是以用户为第一位,用户都有自己的个人中心,用来展示自己的信息,头像无疑是展示自己最直观的方式,随着各种政策的出台,实名认证,真人头像变得尤为重要,如果要求上传真人头 ...
- Python通过百度Ai识别图片中的文字
版本:python3.7 工作中有需要识别图片中的汗字,查看了半天大神们的博客,但没找到完全可以用的源码,经过自己的实践,以下源码可以实现: 创建应用 首先你需要登录百度AI,选择文字识别,创建一个应 ...
- 深入学习使用ocr算法识别图片中文字的方法
公司有个需求,简单点说需要从一张图片中识别出中文,通过python来实现,当然其他程序也行,只要能实现,而小编主要学习python,所以就提了python.一个小白在网上遨游了一天,终于找到一丝丝思绪 ...
- numpy 构建深度神经网络来识别图片中是否有猫
目录 1 构建数据 2 随机初始化数据 3 前向传播 4 计算损失 5 反向传播 6 更新参数 7 构建模型 8 预测 9 开始训练 10 进行预测 11 以图片的形式展示预测后的结果 搭建简单神经网 ...
- 超详细的编码实战，让你的springboot应用识别图片中的行人、汽车、狗子、喵星人（JavaCV+YOLO4）
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- 使用face_recognition批量识别图片中的人数
#使用face_recognition实现从图片中选中人数并分别输出txtimport face_recognition import cv2 import os fin = 'D:\\Users\\ ...
- 识别图片中文字（百度AI）
这个是百度官方的文档 https://ai.baidu.com/docs#/OCR-API/top 通用的文字识别,如果是其他的含生僻字/含位置信息的版本,请参考官方的文档,只 ...
随机推荐
- CentOS7用yum快速搭建LAMP平台
实验环境: [root@nmserver-7 html]# cat /etc/redhat-release CentOS release 7.3.1611 (AltArch) [root@nmserv ...
- sequelize 中文文档
https://demopark.github.io/sequelize-docs-Zh-CN/
- 13行代码实现：Python实时视频采集（附源码）
一.前言 本文是<人脸识别完整项目实战>系列博文第3部分:程序设计篇(Python版),第1节<Python实时视频采集程序设计>,本章内容系统介绍:基于Python+open ...
- OpenResty的现状、趋势、使用及学习方法
Nginx 是俄罗斯人发明的, Lua 是巴西几个教授发明的,中国人章亦春把 LuaJIT VM 嵌入到 Nginx 中,实现了 OpenResty 这个高性能服务端解决方案. 通过 OpenRest ...
- OSPFV3综合实验 （第三组）
拓扑图 本次试验规划:拓扑分4个区域,其中区域2采用帧中继实现区域内互通的前提下配置OSPF.ospfv3.R7与R8之间配置rip实现互通,区域1作为nssa区域,实现路由注入.最终实现全局互通. ...
- 电脑忘记WiFi密码了，但又想知道，该怎么办？
如何查看电脑已经连过的WiFi的密码? 你有没有遇到这样的情况,电脑之前连过的WiFi,正好手机也想连此WiFi,但是忘记密码了,没有WiFi的手机怎么能叫手机呢?.下面我们来看看如何查看已连接过的W ...
- JeeCMS v7 SSRF导致任意文件写入
前言: 学习大佬的思路. from先知社区:https://xz.aliyun.com/t/4809 00X1: 是/ueditor/getRemoteImage.jspx 接口 通过构造upfile ...
- C#使用AppDomain时的异常分析：Object ‘XXXX.rem’ has been disconnected or does not exist at the server.
在使用C#的应用程序域的时候,碰到这么一个异常: System.Runtime.Remoting.RemotingException: Object ‘/76e7cd41_2cd2_4e89_9c03 ...
- 码云Gitee上新建项目教程
1.在浏览器访问,https://gitee.com/: 2.使用用户名.密码登录: 3.在左下角显示当前用户的项目,点击“+”号,创建项目: 4.填写项目的相关信息,项目名称要和本地要上传的项目名称 ...
- NLP一些工程应用模型
发现一个DL的博客,对文章分类归纳做的比较好:第三篇文章中的模型可以重点参考 “自然语言学习资料的汇总” 综述 | 一文读懂自然语言处理NLP(附学习资料) 用深度学习(CNN RNN Attenti ...