使用Google视觉API构建OCR应用

作者 : IT 大叔 本文共5451个字,预计阅读时间需要14分钟 发布时间: 2020-09-21

在本教程中,我们将使用Google视觉API在Node.js中构建OCR应用。

Google视觉API入门

要开始使用Google Vision API,请访问下面的链接

https://cloud.google.com/vision/docs/setup

按照有关如何设置Google视觉API的说明进行操作,并获取GOOGLE APPLICATION CREDENTIALS(这是一个包含服务密钥的JSON文件),设置完成后,该文件就会下载到您的计算机中。GOOGLE APPLICATION CREDENTIALS非常有用,因为没有它,我们将要构建的应用程序将无法运行。

使用Node.js客户端库

要使用Node.js客户端库,请访问下面的链接以开始使用。

https://cloud.google.com/vision/docs/quickstart-client-libraries

该页面显示了如何以您喜欢的编程语言使用Google Vision API。现在我们已经看到了页面上的内容,我们可以直接在代码中实现它。

创建一个名为ocrGoogle的目录,然后在您喜欢的代码编辑器中将其打开。

npm init -y

创建一个package.json文件。然后跑

npm install --save @google-cloud/vision

安装谷歌视觉API。创建一个资源文件夹,将图像从wakeupcat.jpg下载到该文件夹​​中,然后创建一个index.js文件并使用以下代码填充它

process.env.GOOGLE_APPLICATION_CREDENTIALS = 'C:/Users/lenovo/Documents/readText-f042075d9787.json'

async function quickstart() {
  // Imports the Google Cloud client library
  const vision = require('@google-cloud/vision');

  // Creates a client
  const client = new vision.ImageAnnotatorClient();

  // Performs label detection on the image file
  const [result] = await client.labelDetection('./resources/wakeupcat.jpg');
  const labels = result.labelAnnotations;
  console.log('Labels:');
  labels.forEach(label => console.log(label.description));
}

quickstart()

在第一行中,我们将GOOGLE_APPLICATION_CREDENTIALS的环境变量设置为我们先前下载的JSON文件。异步功能快速入门包含一些Google逻辑,然后在最后一行中,我们调用该功能。

node index.js

要处理图像,应将图像标签打印到控制台。
使用Google视觉API构建OCR应用插图

看起来不错,但是我们不想使用标签检测,因此请按照以下步骤更新index.js

// Imports the Google Cloud client library
const vision = require('@google-cloud/vision');


process.env.GOOGLE_APPLICATION_CREDENTIALS = 'C:/Users/lenovo/Documents/readText-f042075d9787.json'

async function quickstart() {
    try {
        // Creates a client
        const client = new vision.ImageAnnotatorClient();

        // Performs text detection on the local file
        const [result] = await client.textDetection('./resources/wakeupcat.jpg');
        const detections = result.textAnnotations;
        const [ text, ...others ] = detections
        console.log(`Text: ${ text.description }`);
    } catch (error) {
        console.log(error)
    }

}

quickstart()

上面的逻辑返回图像上的文本,除了一些更改外,它看起来与以前的逻辑相同。

  • 现在,我们使用client.textDetection方法而不是client.labelDetection。
  • 我们将检测阵列分解为两个部分,文本部分和其他部分。text变量包含图像中的完整文本。现在,跑步
node index.js

返回图像上的文本。

使用Google视觉API构建OCR应用插图(2)

安装和使用Express.js

我们需要安装express.js,以创建服务器和要求Google Vision API的API。

npm install express --save

现在,我们可以将index.js更新为

const express = require('express');
// Imports the Google Cloud client library
const vision = require('@google-cloud/vision');
const app = express();

const port = 3000

process.env.GOOGLE_APPLICATION_CREDENTIALS = 'C:/Users/lenovo/Documents/readText-f042075d9787.json'

app.use(express.json())

async function quickstart(req, res) {
    try {
        // Creates a client
        const client = new vision.ImageAnnotatorClient();

        // Performs text detection on the local file
        const [result] = await client.textDetection('./resources/wakeupcat.jpg');
        const detections = result.textAnnotations;
        const [ text, ...others ] = detections
        console.log(`Text: ${ text.description }`);
        res.send(`Text: ${ text.description }`)
    } catch (error) {
        console.log(error)
    }

}

app.get('/detectText', async(req, res) => {
    res.send('welcome to the homepage')
})

app.post('/detectText', quickstart)

//listen on port
app.listen(port, () => {
    console.log(`app is listening on ${port}`)
})

打开失眠症,然后向http:// localhost:3000 / detectText发出发布请求,图像上的文本将作为响应发送。

使用Google视觉API构建OCR应用插图(4)

用multer上传图像

如果我们只能将应用程序与一个图像一起使用,或者每次都必须编辑希望在后端处理的图像,则该应用程序将毫无乐趣。我们想将任何图像上传到路线进行处理,为此我们使用了一个名为multer的npm包。Multer使我们能够将图像发送到路线。

npm install multer --save

要配置multer,请创建一个名为multerLogic.js的文件,并使用以下代码对其进行编辑

const multer = require('multer')
const path = require('path')

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, path.join(process.cwd() + '/resources'))
    },
    filename: function (req, file, cb) {
      cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))
    }
})

const upload = multer( { storage: storage, fileFilter } ).single('image')

function fileFilter(req, file, cb) {
    const fileType = /jpg|jpeg|png/;

    const extname = fileType.test(path.extname(file.originalname).toLowerCase())

    const mimeType = fileType.test(file.mimetype)

    if(mimeType && extname){
        return cb(null, true)
    } else {
        cb('Error: images only')
    }
}

const checkError = (req, res, next) => {
    return new Promise((resolve, reject) => {
        upload(req, res, (err) => {
            if(err) {
                res.send(err)
            } 
            else if (req.file === undefined){
                res.send('no file selected')
            }
            resolve(req.file)
        })
    }) 
}

module.exports = { 
  checkError
}

让我们花一点时间来理解上面的逻辑。这就是全部逻辑,使我们能够将图像发送到detectText路由的逻辑。我们指定具有两个属性的存储

  • 目的地:这指定了上传文件的存储位置,然后
  • 文件名:这使我们可以在存储文件之前重命名该文件。在这里,我们通过串联字段名(实际上是字段名,这里是图像),当前日期以及原始文件的扩展名来重命名文件。

我们创建一个等于multer的变量上载,并使用包含存储和fileFilter的对象进行调用。之后,我们创建一个函数fileFilter来检查文件类型(这里我们指定png,jpg和jpeg文件类型)。
接下来,我们创建一个函数checkError来检查错误,如果没有错误,则返回一个用req.file解析的promise,否则错误将得到适当处理,最后,我们导出checkError。这就足够解释了,现在我们可以继续进行代码了。
为了使用checkError,我们在index.js中要求如下,

const { checkError } = require('./multerLogic')

然后如下编辑快速启动功能

async function quickstart(req, res) {
    try {

        //Creates a client
        const client = new vision.ImageAnnotatorClient();
        const imageDesc = await checkError(req, res)
        console.log(imageDesc)
        // Performs text detection on the local file
        // const [result] = await client.textDetection('');
        // const detections = result.textAnnotations;
        // const [ text, ...others ] = detections
        // console.log(`Text: ${ text.description }`);
        // res.send(`Text: ${ text.description }`)

    } catch (error) {
        console.log(error)
    }

}

我们调用checkError函数(返回一个Promise)并将解析的req.file分配给imageDesc,然后将imageDesc打印到控制台。发出失眠的POST请求

使用Google视觉API构建OCR应用插图(6)

我们应该将以下结果打印到控制台。

使用Google视觉API构建OCR应用插图(8)

很好,既然我们已经启动了图像上传并开始运行了,是时候更新代码以使用上传的图像了。使用以下代码编辑快速启动功能,

//Creates a client
        const client = new vision.ImageAnnotatorClient();
        const imageDesc = await checkError(req, res)
        console.log(imageDesc)
        //Performs text detection on the local file
        const [result] = await client.textDetection(imageDesc.path);
        const detections = result.textAnnotations;
        const [ text, ...others ] = detections
        res.send(`Text: ${ text.description }`)

最后,使用失眠向我们的路线发出POST请求,我们应该得到与此类似的结果。

使用Google视觉API构建OCR应用插图(10)

本教程是一个非常简单的示例,说明可以使用Google视觉API构建的内容,可以在此处找到Github存储库,
有关更强大的版本,请访问此存储库

免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 使用Google视觉API构建OCR应用

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论