CODE大全
版权声明:本文为博主原创文章,未经博主允许不得转载。

Javascript图片文字识别(OCR)插件 Ocrad.js 教程

发布时间:『 2017-08-31 16:53』  博客类别:WEB前端  阅读(479) 评论(0)

Ocrad.js 相当于是 Ocrad 项目的纯 JavaScript 版本,使用 Emscripten 自动转换。这是一个简单的 OCR (光学字符识别)程序,可以扫描图像中的文字回文本。


不像 GOCR.js,Ocrad.js 被设计成一个端口,而不是围绕可执行的包装。这意味着后续的图像处理,并不涉及重新初始化可执行代码,以便处理图像尽可能少的进行,因此它需要的时间仅为 GOCR.js 的八分之一。


GOCR.js 已在 github 进行开源。下载地址:https://github.com/antimatter15/ocrad.js


下面通过一个简单的 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);

——— 全文完 ———
如有版权问题,请联系532009913@qq.com。
关键字:   OCR     Javascript     ​ocrad.js  
评论信息
暂无评论
发表评论
验证码: 
Powered by CODE大全 | 鄂ICP备14009759号-2 | 网站留言 Copyright © 2014-2016 CODE大全 版权所有