图片文字识别(OCR)插件Ocrad.js教程


Posted in Javascript onNovember 26, 2018

下面通过一个简单的 demo 来讲解 Ocrad.js。

<html>
 <head>
 <title>业余草:www.xttblog.com</title>
 <style>
 body {
 background: whiteSmoke;
 font-family: sans-serif;
 margin: 30px;
 }
 #transcription, #pic {
 background: white;
 display: inline-block;
 border: 1px solid #ddd;
 margin: 10px;
 }
 #transcription {
 font-size: 30px;
 padding: 30px;
 min-width: 300px;
 color: gray;
 }
 #transcription.done {
 color: black;
 }
 #main {
 display: flex;
 }
 </style>
 </head>
 <body>
 <h1>Simple Ocrad.js Example</h1>
 <script src="../../ocrad.js"></script>
 <script>
 function recognize_image(){
 document.getElementById('transcription').innerText = "(Recognizing...)"
 OCRAD(document.getElementById("pic"), function(text){
 document.getElementById('transcription').className = "done"
 document.getElementById('transcription').innerText = text;
 })
 }
 </script>
 <div id="main">
 <!-- CODE大全:www.codedq.net -->
 <img id="pic" src="img/message.png" onload="recognize_image()">
 <div id="transcription"></div>
 </div>
 </body> 
</html>

ocrad.js 的使用很简单,首先需要引入 ocrad.js 文件。

<script src="ocrad.js"></script>

ocrad.js 提供了一个全局函数,ocrad以图像作为参数,以字符串的形式返回识别文本。

var string = OCRAD(image);
alert(string);

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

Javascript 相关文章推荐
jQuery动画特效实例教程
Aug 29 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
详解vuex的简单todolist例子
Jul 14 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 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
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 #Javascript
You might like
用cookies来跟踪识别用户
2006/10/09 PHP
PHP 开发工具
2006/12/06 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
PHP设置进度条的方法
2015/07/08 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
Express.JS使用详解
2014/07/17 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛 DT VS HGT
2014/05/22 DOTA
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
python 三元运算符使用解析
2019/09/16 Python
Python 如何展开嵌套的序列
2020/08/01 Python
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
瑞典最大的儿童用品网上商店:pinkorblue.se
2021/03/09 全球购物
static关键字的用法
2013/10/07 面试题
专营店会计助理岗位职责
2013/11/29 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
单位授权委托书范本
2014/09/26 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书