图片文字识别(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 继承实现例子
Aug 12 Javascript
js读取被点击次数的简单实例(从数据库中读取)
Mar 07 Javascript
javascript数组排序汇总
Jul 07 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
React中的render何时执行过程
Apr 13 Javascript
详解Node.js一行命令上传本地文件到服务器
Apr 22 Javascript
详解Vue 换肤方案验证
Aug 28 Javascript
vue实现扫码功能
Jan 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
快速开发一个PHP扩展图文教程
2008/12/12 PHP
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
php实现利用phpexcel导出数据
2013/08/24 PHP
php中session使用示例
2014/03/29 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
python如何提升爬虫效率
2020/09/27 Python
python urllib和urllib3知识点总结
2021/02/08 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
英国现代市场:ARKET
2019/04/10 全球购物
美国Max仓库:Max Warehouse
2020/05/31 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
会计电算化大学生职业规划书
2014/02/05 职场文书
妇女儿童发展规划实施方案
2014/03/16 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技