国庆节在家做一个文字识别网站-技术圈

国庆节在家做一个文字识别网站

CV工程师

共 3832字，需浏览 8分钟

2022-02-09 17:37

国庆节一直在下雨，我也没有办法出去愉快的玩耍，突然想到之前有在服务器上部署一个ocr文字识别接口，于是就想要做一个在线OCR识别工具，说干就干，但是打开了vs code却无从下手，页面应该怎么做呢？

想直接用识别接口的：https://zn.gg/tools/ocr

思路

首先需要上传图片
然后把图片转换成base64编码
之后通过ajax请求接口
展示返回识别到的内容

上传图片并获得base64编码

上传图片的话使用表单的input标签就可以，然后使用FileReader可以读取到图片内容，那么代码如下：

imageData就是图片的base64编码，我使用正则表达式/.?base64,/* 去掉了前缀，拿到了图片真正的base64编码。

ajax获取识别结果

那么之后就需要网络请求了，我使用ajax进行网络请求，所以首先需要导入jquery库，然后带入image参数进行请求，接口地址是：https://zn.gg/api/common/v1/ocr ，另外这个识别是需要一个过程的，所以设置了一下超时时间为60秒，为了方便解析返回的结果，所以设置了dataType为json，这样就可以直接获取结果了。在得到结果之后我们需要解析一下结果，这里使用eval来把字符串转换成了数组，通过循环遍历出结果，存放在变量msg中。

$.ajax({
    type: 'POST',
    url: 'https://zn.gg/api/common/v1/ocr',
    timeout: '60000',
    dataType: 'json',
    data: {
        image: imageData
    },
    success: function(data) {

        let arr = eval('(' + data.value[0] + ')')
        var msg = ""
        arr.forEach(element => {
            msg += element
        });
       
       //msg就是识别结果。
        
    },
    error: function(data) {
        
    }
})

美化

这个还是比较好玩的，一共有两个部分：

上传按钮
识别过程中的图片扫描效果

上传按钮美化

首先来说这个这个上传按钮，一个input标签，类型为file，我刚开始使用css增加背景颜色等试图让它变得好看一些，可是根本没有效果。于是换了一种思路：使用绝对位置，让input覆盖在另外一个元素上面，让input的宽高和被覆盖的元素相同，设置input透明，这样只需要没话被覆盖的元素就可以了。代码如下：

图片扫描效果

这个看起来很炫酷，实际上就是一个很简单的动画，放一个div覆盖在图片上，然后使用动画设置div的高度和透明度，这个div的背景是一个渐变色的蓝色背景，这样就实现了上下扫描的效果。上传图片后设置展示效果的div的display为block，接收到返回后设置为none，这样就实现了扫描效果。

完整代码