图片文字识别(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 相关文章推荐
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
vue登录注册及token验证实现代码
Dec 14 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
详解react、redux、react-redux之间的关系
Apr 11 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 Javascript
JS如何监听div的resize事件详解
Dec 03 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 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
javascript的函数作用域
2014/11/12 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
2017/07/21 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
Python如何快速实现分布式任务
2017/07/06 Python
深入浅析Python的类
2018/06/22 Python
Python 面试中 8 个必考问题
2018/11/16 Python
Python魔法方法详解
2019/02/13 Python
python内置函数sorted()用法深入分析
2019/10/08 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
公司担保书格式范文
2014/05/12 职场文书
读书之星事迹材料
2014/05/12 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
小学母亲节活动总结
2015/02/10 职场文书
个人总结怎么写
2015/02/26 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android