图片文字识别(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实现的超出屏幕时把固定层变为定位层的代码
Feb 23 Javascript
JavaScript中数组继承的简单示例
Jul 29 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
微信小程序 新建登录页并实现tabBar隐藏
Jun 13 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
Sep 10 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
vue中 this.$set的用法详解
Sep 06 Javascript
Vue引入Stylus知识点总结
Jan 16 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
PHP5/ZendEngine2的改进
2006/10/09 PHP
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
php实现记事本案例
2020/10/20 PHP
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
js实现登陆遮罩效果的方法
2015/07/28 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
如何优雅地在vue中添加权限控制示例详解
2019/03/07 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
python实现屏保程序(适用于背单词)
2019/07/30 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
Python ATM功能实现代码实例
2020/03/19 Python
Python-jenkins模块获取jobs的执行状态操作
2020/05/12 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
珍珠奶茶店创业计划书
2014/01/11 职场文书
学年末自我鉴定
2014/01/21 职场文书
采购助理岗位职责
2014/02/16 职场文书
小班秋游活动方案
2014/02/22 职场文书
要账委托书范本
2014/09/15 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
基于Python的EasyGUI学习实践
2021/05/07 Python
学会Python数据可视化必须尝试这7个库
2021/06/16 Python