图片文字识别(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 23 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
Extjs实现下拉菜单效果
Apr 01 Javascript
vuex的使用及持久化state的方式详解
Jan 23 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 Javascript
js实现淘宝浏览商品放大镜功能
Oct 28 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 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
php实现对象克隆的方法
2015/06/20 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
Javascript valueOf 使用方法
2008/12/28 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
详解React路由传参方法汇总记录
2020/11/29 Javascript
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python的Django框架下管理站点的基本方法
2015/07/17 Python
python记录程序运行时间的三种方法
2017/07/14 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
通过实例了解python property属性
2019/11/01 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
python 如何引入协程和原理分析
2020/11/30 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
法国春天百货官网:Printemps.com
2020/06/29 全球购物
办公室文员工作自我评价
2013/12/01 职场文书
教师求职信范文分享
2013/12/27 职场文书
护理专业大学生自我推荐信
2014/01/25 职场文书
餐厅筹备计划书
2014/04/25 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
职工培训工作总结
2015/08/10 职场文书
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android