图片文字识别(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 相关文章推荐
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
jquery ajax修改全局变量示例代码
Nov 08 Javascript
JQUERY 设置SELECT选中项代码
Feb 07 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
JS提交form表单实例分析
Dec 10 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
Angular 路由route实例代码
Jul 12 Javascript
JS类的定义与使用方法深入探索
Nov 26 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 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
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
javascript CSS画图之基础篇
2009/07/29 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
JSON相关知识汇总
2015/07/03 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
Bootstrap的Refresh Icon也spin起来
2016/07/13 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
python中requests和https使用简单示例
2018/01/18 Python
python实现QQ批量登录功能
2019/06/19 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
.NET面试问题集
2015/12/08 面试题
如何写你的创业计划书
2014/01/07 职场文书
法学专业自我鉴定
2014/02/05 职场文书
食品安全工作方案
2014/05/07 职场文书
安全宣传标语
2014/06/10 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
SpringBoot快速入门详解
2021/07/21 Java/Android