ノードが ocr を実装する方法の簡単な分析

ocr (光学式文字認識) を実装するにはどうすればよいですか?次の記事では、node を使用して OCR を実装する方法を紹介します。

#ocr は光学式文字認識で、簡単に言えば、画像上の文字を認識することです。

残念ながら、私は単なる低レベルの Web プログラマーです。AI についてはあまり知りません。OCR を実装したい場合は、サードパーティのライブラリしか見つかりません。

Python 言語には OCR 用のサードパーティ ライブラリが多数あります。私は長い間、nodejs で OCR を実装するためのサードパーティ ライブラリを探していました。最終的に、ライブラリ tesseract.js を見つけました。 OCR は依然として非常に便利に実装できます。 [関連チュートリアルの推奨事項: nodejs ビデオ チュートリアル ]

効果の表示

オンライン例: http://www.lolmbbs.com/tool/ ocr

詳細コード

tesserract.js このライブラリには複数のバージョンが用意されており、ここではオフラインのものを使用します。バージョン tesseract.js-offline では、結局のところ、誰もがネットワークの状態が悪いことに悩まされています。

#デフォルトのサンプルコード

const { createWorker } = require('tesseract.js');
const path = require('path');

const worker = createWorker({
  langPath: path.join(__dirname, '..', 'lang-data'), 
  logger: m => console.log(m),
});

(async () => {
  await worker.load();
  await worker.loadLanguage('eng');
  await worker.initialize('eng');
  const { data: { text } } = await worker.recognize(path.join(__dirname, '..', 'images', 'testocr.png'));
  console.log(text);
  await worker.terminate();
})();

1. 多言語認識のサポート

• 必要な対応する言語モデルを https://github.com/naptha/tessdata/tree/gh-pages/4.0.0 からダウンロードし、ルート ディレクトリに置きます。 lang-data ディレクトリ

  中国語 (
  chi_sim.traineddata.gz) 日本語 (jpn.traineddata.gz) 英語 (eng.traineddata.gz ) を選択しました。 ) 3 か国の言語モデル。

• コード内のモデルの読み込みと初期化の言語項目構成を変更して、中国語、日本語、英語の言語を同時にサポートします。

await worker.loadLanguage('chi_sim+jpn+eng');
await worker.initialize('chi_sim+jpn+eng');

ログイン後にコピー

https://github.com/Selenium39/tesseract.js-offline

2. 認識パフォーマンスの向上

• Web プロジェクトでは、アプリケーションの開始後すぐにモデルをロードできるため、後で OCR リクエストを受信したときにモデルがロードされるまで待つ必要がありません。 。

• 「tesseract.js v2 をリファクタリングする理由」このブログを参照してください。

  createScheduler メソッドを使用して複数のワーカー スレッドを追加し、ocr リクエストを同時に処理できます。

OCR リクエストのマルチスレッド同時処理の例

const Koa = require('koa')
const Router = require('koa-router')
const router = new Router()
const app = new Koa()
const path = require('path')
const moment = require('moment')
const { createWorker, createScheduler } = require('tesseract.js')

;(async () => {
  const scheduler = createScheduler()
  for (let i = 0; i < 4; i++) {
    const worker = createWorker({
      langPath: path.join(__dirname, '.', 'lang-data'),
      cachePath: path.join(__dirname, '.'),
      logger: m => console.log(`${moment().format('YYYY-MM-DD HH:mm:ss')}-${JSON.stringify(m)}`)
    })
    await worker.load()
    await worker.loadLanguage('chi_sim+jpn+eng')
    await worker.initialize('chi_sim+jpn+eng')
    scheduler.addWorker(worker)
  }
  app.context.scheduler = scheduler
})()

router.get('/test', async (ctx) => {
  const { data: { text } } = await ctx.scheduler.addJob('recognize', path.join(__dirname, '.', 'images', 'chinese.png'))
  // await ctx.scheduler.terminate()
  ctx.body = text
})

app.use(router.routes(), router.allowedMethods())
app.listen(3002)

ab -n 4 -c 4 localhost:3002/test

エフェクト表示のフロントエンド コードは、主に elementui コンポーネントと vue-cropper コンポーネントを使用して実装されます。

vue-cropper コンポーネントの具体的な使用方法については、私のブログを参照してください。vue 画像のトリミング: 画像のトリミングに vue-cropper を使用する

画像をアップロードするとき、まずフロントエンドでアップロードされた画像のbase64をロードし、最初にアップロードされた画像を確認してから、バックエンドに画像のアップロードをリクエストできます。これはユーザーエクスペリエンスにとってより良い方法です。完全なコードは次のとおりです。次のように

ノード関連の知識をさらに詳しくするには、

をご覧ください。

以上がノードが ocr を実装する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。