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 相关文章推荐
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
使用JavaScript实现点击循环切换图片效果
Sep 03 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
layui问题之模拟select点击事件的实例讲解
Aug 15 Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
图片文字识别(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
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
js列举css中所有图标的实现代码
2011/07/04 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
JS画5角星方法介绍
2013/09/17 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python标准库内置函数complex介绍
2014/11/25 Python
python实现linux下使用xcopy的方法
2015/06/28 Python
Python文件操作基本流程代码实例
2017/12/11 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
深入了解python列表(LIST)
2020/06/08 Python
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
追悼会主持词
2014/03/20 职场文书
空气的环保标语
2014/06/12 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
环保公益策划方案
2014/08/15 职场文书
计划生育诚信协议书
2014/11/02 职场文书
银行员工考核评语
2014/12/31 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书
如何解决php-fpm启动不了问题
2021/11/17 PHP