Node+OCR实现图像文字识别功能


Posted in Javascript onNovember 26, 2018

开发目的

这算是node应用的第二个小应用吧,主要目的是熟悉node和express框架。原理很简单:在node搭建的环境下引用第三方包处理图片数据并返回给前台信息。

实现效果,百度提供的图片识别,经过测试识别车牌号等规范文字数字还是比较准确的

环境需求

1.Express 是一个非常流行的node.js的web框架。基于connect(node中间件框架)。提供了很多便于处理http请求等web开发相关的扩展。

2.OCR:

通用文字识别 Node SDK目录结构:

├── src
    │  ├── auth                                //授权相关类
    │  ├── http                                //Http通信相关类
    │  ├── client                              //公用类
    │  ├── util                                //工具类
    │  └── const                               //常量类
    ├── AipOcr.js                      //通用文字识别交互类
    ├── index.js                               //入口文件
    └── package.json                           //npm包描述文件 

支持 node 版本 4.0+
直接使用node开发包步骤如下:

1.在官方网站下载node SDK压缩包。
2.将下载的aip-node-sdk-version.zip解压后,复制到工程文件夹中。
3.进入目录,运行npm install安装sdk依赖库
4.把目录当做模块依赖

其中,version为版本号,添加完成后,用户就可以在工程中使用通用文字识别 Node SDK。

直接使用npm安装依赖:

npm install baidu-aip-sdk(尝试没有成功

AipOcrClient是Optical Character Recognition的node客户端,为使用Optical Character Recognition的开发人员提供了一系列的交互方法。

用户可以参考如下代码新建一个AipOcrClient:

var AipOcrClient = require("baidu-aip-sdk").ocr; 
// 设置APPID/AK/SK 
var APP_ID = "你的 App ID"; 
var API_KEY = "你的 Api Key"; 
var SECRET_KEY = "你的 Secret Key"; 
var client = new AipOcrClient(APP_ID, API_KEY, SECRET_KEY);

express搭建就不再做详细介绍了,上一篇博客已有哦~~

功能实现

前端上传图片后端处理:

router.route("/uploadPhoto").get(function(req,res){ // 到达此路径则渲染register文件,并传出title值供 register.html使用
 res.render("uploadPhoto",{title:'图片文字识别',message:""});
}).post(function(req,res){
 // 跨域
 res.header("Access-Control-Allow-Origin", "*");
 res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
 res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");

 let form = new formidable.IncomingForm();
 form.encoding = 'utf-8'; // 编码
 form.keepExtensions = true; // 保留扩展名
 form.maxFieldsSize = 2 * 1024 * 1024; // 文件大小
 form.uploadDir = 'F:/nodejs/ocrCheck/assets/OCR' // 存储路径
 form.parse(req,function(err,fileds,files){ // 解析 formData数据
  if(err){ return console.log(err) }

  let imgPath = files.img.path // 获取文件路径
  let imgName = "F:/nodejs/ocrCheck/assets/OCR/test." + files.img.type.split("/")[1] // 修改之后的名字
  let data = fs.readFileSync(imgPath) // 同步读取文件

  fs.writeFile(imgName,data,function(err){ // 存储文件
   if(err){ return console.log(err) }

   fs.unlink(imgPath,function(){}) // 删除文件
   //上传图片成功返回code:1
   //res.json({code:1})
   global.nodeServer.getResult(res,imgName);
  })
 });
});

图片处理核心模块:

module.exports = { 
 getResult : function(res,imgName){
  var image = fs.readFileSync(imgName);
  var base64Img = new Buffer(image).toString('base64');
  client.generalBasic(base64Img).then(function(result) {
   console.log(JSON.stringify(result));
   res.json(result);
  });
 }
}

获取到的base64图片数据和res对象作为阐述传递给ocr提供好的方法, 回调产生的数据将作为结果返回给前端。

####小彩蛋:

nodeJs中commonJs规范如何实现的?

1.Node程序由许多个模块组成,每个模块就是一个文件。Node模块采用了CommonJS规范。
2.module对象,Node内部提供一个Module构建函数。所有模块都是Module的实例。每个模块内部,都有一个module对象,代表当前模块。它有以下属性。

module.id 模块的识别符,通常是带有绝对路径的模块文件名。
module.filename 模块的文件名,带有绝对路径。
module.loaded 返回一个布尔值,表示模块是否已经完成加载。
module.parent 返回一个对象,表示调用该模块的模块。
module.children 返回一个数组,表示该模块要用到的其他模块。
module.exports 表示模块对外输出的值。

3.调用:根据模块名称作为对象调用其内自定义的方法即可。

global.nodeServer.getResult(res,imgName);

前端js代码就不贴了 so~easy

效果展示

Node+OCR实现图像文字识别功能

源码:Node_OCR

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
基于jquery自定义图片热区效果
Jul 21 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
vue如何限制只能输入正负数及小数
Jul 04 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
解决小程序无法触发SESSION问题
Feb 03 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 #Javascript
JS 验证码功能的三种实现方式
Nov 26 #Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 #Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 #Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 #Javascript
Vue.js的动态组件模板的实现
Nov 26 #Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 #Javascript
You might like
PHP实现的memcache环形队列类实例
2015/07/28 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
js资料prototype 属性
2007/03/13 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
js事件驱动机制 浏览器兼容处理方法
2016/07/23 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
js断点调试经验分享
2017/12/08 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
python改变日志(logging)存放位置的示例
2014/03/27 Python
初步剖析C语言编程中的结构体
2016/01/16 Python
python 网络编程详解及简单实例
2017/04/25 Python
详解Python字典小结
2018/10/20 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
求职推荐信范文
2013/12/01 职场文书
美发活动策划书
2014/01/14 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
pycharm debug 断点调试心得分享
2021/04/16 Python
background-position百分比原理详解
2021/05/08 HTML / CSS
详解Python类和对象内容
2021/06/22 Python