图片文字识别(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来处理图片坏链具体实现步骤
May 02 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
js格式化时间的方法
Dec 18 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
AngularJS路由Ui-router模块用法示例
May 29 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
详解一个基于套接字实现长连接的express
Mar 28 Javascript
读懂CommonJS的模块加载
Apr 19 Javascript
react如何快速设置文件路径别名
Apr 28 Javascript
springboot+VUE实现登录注册
May 27 Vue.js
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
用Flash图形化数据(二)
2006/10/09 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
2015/11/29 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
2017/03/17 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
TensorFlow实现简单的CNN的方法
2019/07/18 Python
Django  ORM 练习题及答案
2019/07/19 Python
python批量修改ssh密码的实现
2019/08/08 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
Python列表切片常用操作实例解析
2019/12/16 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
岗位明星事迹材料
2014/05/18 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
同学会感言
2015/07/30 职场文书