图片文字识别(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 相关文章推荐
浅谈JavaScript Array对象
Dec 29 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
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
世界第一个无线广播电台 KDKA
2021/03/01 无线电
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
新闻内页-JS分页
2006/06/07 Javascript
js获取单选按钮的数据
2006/11/27 Javascript
JSON 编辑器实现代码
2009/12/06 Javascript
JavaScript插入动态样式实现代码
2012/02/22 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
Python set集合类型操作总结
2014/11/07 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
python3 re返回形式总结
2020/11/20 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
职业生涯规划书范文
2014/03/10 职场文书
工作决心书范文
2014/03/11 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
导游词之崇武古城
2019/10/07 职场文书