图片文字识别(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 相关文章推荐
给Function做的OOP扩展
May 07 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
Bootstrap的基本应用要点浅析
Dec 19 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
使用JavaScript开发跨平台的桌面应用详解
Jul 27 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 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
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
jQuery 自定义函数写法分享
2012/03/30 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
理解JS事件循环
2016/01/07 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
react-router中的属性详解
2017/06/01 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
Python 操作MySQL详解及实例
2017/04/30 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
利用python求积分的实例
2019/07/03 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
PHP如何自定义函数
2016/09/16 面试题
金鑫耀Java笔试题
2014/09/06 面试题
Java面试题汇总
2015/12/06 面试题
服务行业个人求职的自我评价
2013/12/12 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
文案策划求职信
2014/04/14 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python
DQL数据查询语句使用示例
2022/12/24 MySQL