图片文字识别(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 相关文章推荐
function, new function, new Function之间的区别
Mar 08 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
Jul 31 Javascript
使用js 设置url参数
Jul 08 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 24 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 禁止页面缓存输出
2009/01/07 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
php中动态变量用法实例
2015/06/10 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
理解Javascript_13_执行模型详解
2010/10/20 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
js制作简易年历完整实例
2015/01/28 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
vue组件实现文字居中对齐的方法
2017/08/23 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
阿望教你用vue写扫雷小游戏
2020/01/20 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
python实现在字符串中查找子字符串的方法
2015/07/11 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
python实现俄罗斯方块游戏
2020/03/25 Python
Pycharm Git 设置方法
2020/09/15 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
电子商务专员岗位职责
2013/12/11 职场文书
高中美术教学反思
2014/01/19 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
高三英语复习计划
2015/01/19 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书