今回は、Node.jsとTypeScriptの実行環境の中でGoogle Cloud Vision APIをOCRとして利用し、画像からテキストを取得する方法を備忘録としてまとめていきます。主に、Cloud Vision APIのセットアップやNode上でSDKを使って操作する方法を整理していますので、少しでも参考になれば幸いです。
Cloud Vision API について
Cloud Vision APIとは
Google Cloud Vision APIは、GCP（Google Cloud Platform）が提供する画像認識APIで、画像内のオブジェクト検出やテキスト抽出、顔認識など多様な機能を提供しています。事前トレーニング済みのOCR APIを利用できるため、すぐに利用したい時に便利です。
Cloud Vision APIのユースケース
Cloud Vision APIは、以下のようなユースケースに利用できます。
- 画像内のテキスト抽出（OCR）
- 画像内のオブジェクト検出
- 顔認識や感情認識
- ランドマーク検出
- ロゴ検出
Cloud Vision APIの料金について
Cloud Vision APIの料金は、利用する機能やリクエスト数によって異なります。詳細な料金情報は、公式ドキュメントを参照してください。
ざっくり料金はこちら
| ユニット数（/月） | 料金 |
| 〜 1,000 | 無料 |
| 1,001 ～ 5,000,000 | $1.50/1000ユニット |
| 5,000,001 〜 | $0.60/1000ユニット |
実装の流れ
前回の記事を参考にNode.js + TypeScriptの実行環境を構築
公式にあるクイックスタートを参考にセットアップ実施
対象画像からテキストを取得できるようにSDKを利用して実装
画像からテキストが取得できるか検証
開発環境
- Node.js：
v18.15.0 - npm：
v9.5.0 - TypeScript：
v4.9.5 - OS：
MacOS Monterey
構築手順
実行環境の構築
まずはNode.js + TypeScriptで実行できる環境を構築。
構築方法は以下をベースに実施しましたので、まだ構築できていない方は参考にしてください。
Cloud Vision APIのセットアップ
ざっくり以下のような流れでCloud Vision APIを利用できるようにセットアップしていきます。
- Google Cloud プロジェクトを作成
- プロジェクトで課金を有効化
- プロジェクトで Cloud Vision API を有効化
- Google Cloud CLI をインストール & 初期化
- APIを使用するために必要な認証とアクセス制御を設定
実際に公式ドキュメントにあるクイックスタートを参考にセットアップ。
以下記事も参考になりました。
画像からテキストを取得する処理の実装
必要なパッケージのインストール
$ npm install --save @google-cloud/vision環境変数のセット
サービスアカウントを作成して認証する場合は、以下のようにサービスアカウントのキーとなるJSONファイルパスを環境変数にセットします。
export GOOGLE_APPLICATION_CREDENTIALS=path/to/******.json取得処理の実装
最終的なソースコードはこちら。
import { ImageAnnotatorClient } from '@google-cloud/vision';
import fs from 'fs';
class CloudVisionClient {
private readonly client: ImageAnnotatorClient;
constructor() {
this.client = new ImageAnnotatorClient();
}
async fetchImageToText(path: string): Promise<string | undefined> {
const request = {
image: {
content: fs.readFileSync(path),
},
imageContext: {
languageHints: ['ja'],
},
};
const [result] = await this.client.textDetection(request);
const detections = result.textAnnotations;
const description = detections?.[0].description;
return description ?? undefined;
}
}
//即時関数で実行
(async () => {
const client = new CloudVisionClient();
const result = await client.fetchImageToText('./sample.png');
console.log(result);
})();今回の内容だとクラスにする必要はないですが、他のアプリケーションでも使いやすいようにクラスにしています。
【ざっくりな処理フロー】
@google-cloud/visionからImageAnnotatorClientをインポートfs.readFileSyncを使って画像ファイルを読み込みtextDetectionメソッドを使ってテキスト抽出を行い、結果を取得- 取得した結果から
textAnnotationsを抽出
動作検証
下記のような画像を配置してテキストが取得できるか確認していきます。
参照元：https://cloud.google.com/?hl=ja
ファイルを実行されると以下のように該当テキストが取得できていることを確認できた。
$ node dist/index.js
未来を描き、 実現す
る。 デジタル変革を
Google Cloud で。
アプリの作成を迅速化し、 ビジネス上の意思決定をさらにス
マートにして、従業員がどこからでもつながれるようにしま
しょう。このままでは改行コードで単語が区切られてしまっているので、ルールベースで調整したり、ChatGPTに構造化データとして変換してもらう必要はあります。
まとめ
この記事では、Node.jsとTypeScriptを使用してGoogle Cloud Vision APIを利用した画像からテキストを取得する方法をまとめました。OCRツールやサービスは多くありますが、今回はGCPが提供するCloud Vision APIを利用してみました。この記事が少しでも誰かの参考になれば幸いです。
