Java基础、中级、高级、架构面试资料
    你的位置：业余草 > HTML5 > Js OCR 插件 Ocrad.js 实战

    Js OCR 插件 Ocrad.js 实战

    HTML5 herman 11206浏览 0评论
    公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
    本博客日IP超过2000，PV 3000 左右，急需赞助商。
    极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
    受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
    所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
    视频教程免费领
    腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

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

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

    Ocr

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

    首先我们需要下载Ocrad.js。

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

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

    全部代码如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    <!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 实战

    继续浏览有关 的文章

    相关文章推荐