图片文字识别(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的动态创建表格的插件
Apr 05 Javascript
改变隐藏的input中value值的方法
Mar 19 Javascript
js的回调函数详解
Jan 05 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
js变量提升深入理解
Sep 16 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
js实现年月日表单三级联动
Apr 17 Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 Javascript
详解Vue数据驱动原理
Nov 17 Javascript
js实现简单的倒计时
Jan 28 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
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
PHPMailer发送邮件
2016/12/28 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
JavaScript中的闭包
2016/02/24 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
python中正则表达式的使用方法
2018/02/25 Python
遗传算法python版
2018/03/19 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
python的re模块使用方法详解
2019/07/26 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
Python字符串格式化输出代码实例
2019/11/22 Python
windows下python安装pip方法详解
2020/02/10 Python
Python作用域与名字空间原理详解
2020/03/21 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript