前端如何实现图片内文字识别（tesseract/ocr）

001.jpg

002.jpg

一、第一种方式

需要安装tesseract.js：yarn add tesseract.js

<template>
  <div class="">
    <img :src="base64_001" alt="" />
    <p v-for="item of tesseractList" :key="item">{{ item }}</p>
  </div>
</template>

<script>
import Tesseract from 'tesseract.js'
import axios from 'axios'
import base64_001 from './001.jpg'
export default {
  name: 'Tesseract',
  data() {
    return {
      base64_001,
      tesseractList: []
    }
  },
  async created() {
    const oneJpgBase64 = await this.convertImageToBase64(base64_001)
    this.recognize(oneJpgBase64)
  },
  methods: {
    recognize(base64) {
      Tesseract.recognize(
        base64,
        'chi_sim' // 语言，可以根据需要选择
        // {
        //   logger: info => console.log(info) // 识别过程中的日志信息
        // }
      ).then(({ data: { text } }) => {
        console.log(text) // 识别的文字
        const textList = text.split('\n').filter(Boolean)
        this.tesseractList.push(...textList)
      })
    },
    // 将本地图片转换为base64
    convertImageToBase64(imagePath) {
      return fetch(imagePath)
        .then(response => response.blob())
        .then(blob => {
          return new Promise((resolve, reject) => {
            const reader = new FileReader()
            reader.onloadend = () => {
              resolve(reader.result)
            }
            reader.onerror = reject
            reader.readAsDataURL(blob)
          })
        })
    }
  }
}
</script>

效果：

二、第二种方式：使用第三方 OCR 服务

示例：使用腾讯云 OCR

1. 注册并获取 API 密钥：在腾讯云注册账号并获取 OCR API 的密钥

进入到腾讯云控制台-访问管理-API秘钥管理

在创建秘钥的时候可以看到secretId和secretKey

2. 安装 SDK：根据提供商的文档安装相应的 SDK。以腾讯云为例：yarn add tencentcloud-sdk-nodejs，写个本地测试服务器，还需要安装下cors

咋们写个server.js，并执行node server.js

const express = require('express')
const tencentcloud = require('tencentcloud-sdk-nodejs')
const bodyParser = require('body-parser')
const cors = require('cors')

const app = express()
app.use(bodyParser.json({ limit: '10mb' })) // 增加请求体的大小限制
app.use(cors())
const OcrClient = tencentcloud.ocr.v20181119.Client
const clientConfig = {
  credential: {
    secretId: 'AKIDHRO7dwEaxDMPGvNxxxxZVDiz3tVt4',
    secretKey: '0pSs54pV4RcbOzOixxxaKrAIDuNce'
  },
  region: 'ap-nanjing',
  profile: {
    httpProfile: {
      endpoint: 'ocr.tencentcloudapi.com'
    }
  }
}

const client = new OcrClient(clientConfig)

app.post('/api/ocr', (req, res) => {
  const params = {
    ImageBase64: req.body.imageBase64 // 从请求体中获取图像数据
  }
  client.GeneralBasicOCR(params).then(
    data => {
      res.json(data)
    },
    err => {
      console.error('error', err)
      res.status(500).send('Error processing OCR')
    }
  )
})

app.listen(3000, () => {
  console.log('Server running on port 3000')
})

组件内调ocr服务：

    async performOCR(base64) {
      try {
        const response = await axios.post('http://192.168.1.37:3000/api/ocr', {
          imageBase64: base64
        })
        console.log('OCR Result:', response.data)
        this.ocrList = response.data.TextDetections.map(n => n.DetectedText)
      } catch (error) {
        console.error('Error during OCR:', error)
      }
    },

效果：

如果你觉得这篇文章对你有用，可以看看作者封装的库xtt-utils，里面封装了非常实用的js方法。如果你也是vue开发者，那更好了，除了常用的api，还有大量的基于element-ui组件库二次封装的使用方法和自定义指令等，帮你提升开发效率。不定期更新，欢迎交流~