MAIL
Tesseract.jsを利用して実装します
今回利用するのは、オープンソースのJavaScriptライブラリ『Tesseract.js』です。
Tesseract.jsは、ブラウザ上で動作するOCR（光学文字認識）ライブラリです。
画像内の文字を解析し、テキストとして抽出するために使用されます。
ただし、抽出精度は完全ではありません。その点は事前に認識しておく必要がありました。
実装にあたり、要件は以下の2点を定めました。
①画像ファイルを対象とする
②日本語、英語、数字を抽出する
それでは実装内容をご紹介いたします。
まずはエディタタブで「説明A」と「説明B」の2項目を有効にします。
今回の実装内容は、説明Aに張り付けた画像からテキストを抽出し説明Bに出力させます。
次に、記録テーブルを作成し、テーブルの管理からHTMLタブを開いて以下のコードを登録します。
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@4.0.2/dist/tesseract.min.js"></script>これにより、CDNからライブラリが使用できるようになりました。
最後に、スクリプトタブを開き、以下のコードを登録します。
出力先は「新規作成」と「編集」にチェックを入れておきます。
$(document).ready(function () {
// DescriptionAクリックでOCRを実行
$('#Results_DescriptionA\\.viewer').on('click', function () {
const img = $(this).find('img')[0];
if (!img) {
console.warn('画像が見つかりません。');
return;
}
// Pleasanterの相対パス → 絶対URLに変換
const imgUrl = location.origin + img.getAttribute('src');
console.log('OCR処理を開始: ', imgUrl);
function normalizeText(text) {
const circledMap = {
'①': '1', '②': '2', '③': '3', '④': '4', '⑤': '5',
'⑥': '6', '⑦': '7', '⑧': '8', '⑨': '9', '⑩': '10',
'⑪': '11', '⑫': '12', '⑬': '13', '⑭': '14', '⑮': '15',
'⑯': '16', '⑰': '17', '⑱': '18', '⑲': '19', '⑳': '20'
};
return text
// 丸付き数字を通常の数字に
.replace(/[\u2460-\u2473]/g, match => circledMap[match] || match)
// 全角数字 → 半角
.replace(/[０-９]/g, ch => String.fromCharCode(ch.charCodeAt(0) - 0xFEE0));
}
Tesseract.recognize(
imgUrl,
'jpn+eng',
{
logger: m => console.log(m.status, m.progress)
}
).then(({ data: { text } }) => {
console.log('抽出されたテキスト:\n', text);
const normalizedText = normalizeText(text);
console.log('正規化後のテキスト:\n', normalizedText);
$p.set($p.getControl('DescriptionB'), normalizedText);
}).catch(err => {
console.error('OCR失敗:', err);
});
});
});コードの内容を簡単に解説いたします。
処理開始の契機は説明A欄をクリックしたタイミングとしました。【$('#Results_DescriptionA\\.viewer').on('click'…】
処理が開始されると画像の有無がチェックされ、画像が見つかった場合にOCRが開始。
Tesseract.recognize() で画像URLと対応言語の情報を読取ります。
そしてテキストが抽出されるのですが、ここで一つ問題が発生しました。
数字の抽出結果が丸付き数字になってしまうケースがあったのです。
その対処のため、このコードでは丸付き数字を通常の数字に置き換える処理を加えました。【normalizeText】
お好みで、全角数字を半角数字に置き換えるなども可能です。
そして最終的に抽出されたテキストがコンソールログと説明Bに出力される挙動となります。【$p.set】
実際に動かした画面がこちら。
今回はシンプルな名刺を想定してテキスト抽出を行ってみます。
説明Aに画像を張り付けた後にクリックすると、説明Bに抽出されたテキストが出力されます。
QRコードも似た形の文字として抽出されてしまっていますが、名前やメールアドレス、電話番号といった主な情報がおおむね画像どおりに抽出されています。
まとめ
いかがでしたか？
抽出の精度ですが、画質や文字の種類、デザインなどによって大きく左右されてしまいます。
そのあたりは利用シーンに合わせてコード側での処理を追加することで、上手く対応できるかもしれません。
みなさまもぜひお試しください。
弊社ではプリザンターをご使用中の方、これからご使用になられる方向けに以下サービスの提供も行っております。
・各種書籍
・帳票出力（Excel/PDF）支援パック
プリザンターの導入から開発・運用をあらゆる角度から全力サポートいたします。
ぜひお気軽にご相談ください！
☆☆☆
サービスの説明などをご希望の方は【 問い合わせフォーム 】よりお気軽にお問い合わせください。
☆☆☆
OCR機能をプリザンターに組み込んで活用してみます
こんにちは、シーイーシーカスタマサービスの新村です。
名刺や手書きの書類などをスキャンして画像として保存するだけでなく、記載されているテキストもデータベース管理できたら便利だと思いませんか？
そんなときに便利なのが、画像からテキストを抽出できるOCR機能です。
このOCR機能をプリザンターに組み込んで活用してみたいと思います。