Js OCR 插件 Ocrad.js 实战

HTML5 herman 4425浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

Ocrad.js 是一款开源的插件库,它能使 image(图片) 转换成文字。本文将介绍它的使用。

光学字符识别,简称OCR,是一种可以使你转换不同文档的技术,比如将扫描纸质文档,PDF文件或者数码相机拍摄的图片转换成可以编辑的文档。

Ocr

整个 Ocrad.js 大概 3.06M。使用起来非常的方便。

首先我们需要下载Ocrad.js

下载完成后,我们在 index.html 中引入Ocrad.js。

最后通过它的OCRAD函数,实现图片转文字。

全部代码如下:

<!doctype html>
<html>
	<head>
		<title>业余草:www.xttblog.com</title>
		<style>
			body {
				background: whiteSmoke;
				font-family: sans-serif;
				margin: 30px;
			}
			#transcription, #nose {
				background: white;
				display: inline-block;
				border: 1px solid #ddd;
				margin: 10px;
				min-height: 300px;
				flex-grow: 1;
			}
			#nose {
				text-align: center;
				font-size: 50px;
				padding: 10px;
			}
			#nose img {
				width: 400px;
			}
			#transcription {
				font-size: 20px;
				padding: 30px;
				min-width: 300px;
				color: gray;
			}
			#transcription.done {
				color: black;
			}
			#main {
				display: flex;
			}
		</style>
	</head>
	<body>
		<h1>业余草:www.xttblog.com</h1>
		<script src="../../ocrad.js"></script>
		<script>
			function recognize_image(){
				document.getElementById('transcription').innerText = "(Recognizing...)"
				OCRAD(document.getElementById("pic"), {
					numeric: true
				}, function(text){
					
				})
			}
			function load_file () {
				var reader = new FileReader();
				reader.onload = function(){
					var img = new Image();
					img.src = reader.result;
					img.onload = function(){
						document.getElementById('nose').innerHTML = ''
						document.getElementById('nose').appendChild(img)
						OCRAD(img, function(text){
							document.getElementById('transcription').className = "done"
							document.getElementById('transcription').innerText = text;
						})
					}
				}
				reader.readAsDataURL(document.getElementById('picker').files[0])
			}
		</script>
		<input type="file" onchange="load_file()" id="picker">		
		<div id="main">
			<div id="nose">
				<p>No file loaded</p>
				<p style="font-size: 25px"> Open a file first </p>
				<p style="font-size: 15px">it's okay. I'll wait. </p>
				<p style="font-size: 10px">no seriously, I can't move</p>
				<p style="font-size: 8px">still waiting...</p>
			</div>
			<div id="transcription"></div>
		</div>
	</body>	
</html>

参考资料

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » Js OCR 插件 Ocrad.js 实战