图片文字识别(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 相关文章推荐
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 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 地址栏信息的获取代码
2009/01/07 PHP
php获取远程文件内容的函数
2015/11/02 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
详解如何探测小程序返回到webview页面
2019/05/14 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
Python单元测试框架unittest简明使用实例
2015/04/13 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
Python用for循环实现九九乘法表
2018/05/31 Python
pymongo中group by的操作方法教程
2019/03/22 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
Python urllib.request对象案例解析
2020/05/11 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
电气自动化大学生求职信
2013/10/16 职场文书
审计工作个人的自我评价
2013/12/25 职场文书
化工专业大学生职业生涯规划书
2014/01/14 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
公司员工培训管理制度
2015/08/04 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
Python Pandas解析读写 CSV 文件
2022/04/11 Python
Java使用HttpClient实现文件下载
2022/08/14 Java/Android