公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
Ocrad.js 是一款开源的插件库，它能使 image（图片） 转换成文字。本文将介绍它的使用。
光学字符识别，简称OCR，是一种可以使你转换不同文档的技术，比如将扫描纸质文档,PDF文件或者数码相机拍摄的图片转换成可以编辑的文档。
整个 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）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！
本文原文出处：业余草： » Js OCR 插件 Ocrad.js 实战