图片文字识别(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 相关文章推荐
一段效率很高的for循环语句使用方法
Aug 13 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
禁用页面部分JavaScript不是全部而是部分
Sep 03 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
JavaScript数据结构与算法之栈与队列
Jan 29 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
Javascript刷新页面的实例
Sep 23 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
JS实现方形抽奖效果
Aug 27 Javascript
通过实例学习React中事件节流防抖
Jun 17 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
杏林同学录(七)
2006/10/09 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
[01:27]DOTA2电竞之夜 今夜共饮庆功酒
2014/08/02 DOTA
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
python适合做数据挖掘吗
2020/06/16 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
后勤副校长自我鉴定
2013/10/13 职场文书
竞聘书模板
2014/03/31 职场文书
会计电算化实训报告
2014/11/04 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
Springboot中如何自动转JSON输出
2022/06/16 Java/Android
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS