※HTMLのcanvas要素に手書き文字を書き込んで、Tesseract.jsに文字認識してもらっています。
はじめに
先日、【Tesseract.js】画像から数字を読み取って数独を解くWebアプリを作ってみた という記事を投稿しました。いろいろ調べてみると、Tesseract.jsは手書き文字もある程度認識できるということだったので、どの程度使えるのか試してみました。
今回も詳しい説明は省略します。
やったこと
- HTMLの
canvas要素に文字を書けるようにする -
canvasに書いた手書き文字をTesseract.jsに認識させる - 英語、日本語、数字、アルファベット、ひらがな、カタカナを選択できるようにして、文字認識の条件を指定できるようにする
ソースコード
-
index.html：ブラウザに表示させるHTML
ソースコードを表示
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {background: whitesmoke;}
#canvas {
display: block;
background-image: url(ichimatsu_silver.png);
background-size: 150px;
border: solid black 0.5px;
box-sizing: border-box;
}
#text {font-weight: bold; color: red}
</style>
<script src='https://unpkg.com/tesseract.js@v2.1.0/dist/tesseract.min.js'></script>
<script src="vector2.js"></script>
<script src="paint.js"></script>
<title>手書き文字認識</title>
</head>
<body>
<div>
<input type="radio" name="mode" value="english" checked>英語
<input type="radio" name="mode" value="japanese">日本語
<input type="radio" name="mode" value="number">数字
<input type="radio" name="mode" value="alphabet">アルファベット
<input type="radio" name="mode" value="hiragana">ひらがな
<input type="radio" name="mode" value="katakana">カタカナ
</div>
<canvas id="canvas" width="300" height="300"></canvas>
<input type="button" id="clear_button" value="クリア">
<input type="button" id="recognize_button" value="読み取る">
<span id="output"></span>
<br>
認識した文字：<span id="text"></span>
<script src="main.js"></script>
</body>
</html>
ちなみに、ichimatsu_silver.pngはフリー素材を使っています。（別に背景白でも問題ない）
-
main.js：メインとなるjavascript
ソースコードを表示
main.js
const canvas = document.getElementById('canvas');// canvas（手書き領域）
const pen = new Pen(canvas);// ペンをインスタンス化
const textZone = document.getElementById('text')// 結果を表示する場所
const out = document.getElementById('output')// 読み込み中/読み込み完了を表示する場所
const modes = document.getElementsByName('mode')// モードを選択するラジオボタン
// canvas上でマウスの座標を取得する関数
const getCoord = e => { return new Vector2(e.offsetX, e.offsetY) }
// Tesseract.jsを使うための準備
const { createWorker } = Tesseract;
// マウスが押されたとき
canvas.addEventListener('mousedown', e => {
const coord = getCoord(e);
pen.begin(coord)
}, false)
// マウスが動いたとき
canvas.addEventListener('mousemove', e => {
const coord = getCoord(e);
if(pen.isDrawing) {
pen.push(coord)
}
}, false)
// マウスが離されたとき
canvas.addEventListener('mouseup', e => {
pen.close();
}, false)
// クリアボタンが押されたとき、canvas全体をクリアする
const clearButton = document.getElementById('clear_button')
clearButton.addEventListener('click', () => {
const ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, canvas.width, canvas.height)
pen.close()
textZone.innerHTML = ''
out.innerHTML = ''
}, false)
// 読み取るボタンが押されたとき、canvasの文字を認識する
const recognizeButton = document.getElementById('recognize_button')
recognizeButton.addEventListener('click', () => {
out.innerHTML = '認識中...'
let lang = 'eng', whitelist = '';
modes.forEach(mode => {
if(mode.checked) {
if(mode.value == 'english') {
lang = 'eng'
whitelist = ''
}
if(mode.value == 'japanese') {
lang = 'jpn'
whitelist = ''
}
if(mode.value == 'number') {
lang = 'eng'
whitelist = '0123456789'
}
if(mode.value == 'alphabet') {
lang = 'eng'
whitelist = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
}
if(mode.value == 'hiragana') {
lang = 'jpn'
whitelist = 'ぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわゐゑをんゔゕゖ'
}
if(mode.value == 'katakana') {
lang = 'jpn'
whitelist = 'ァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶ'
}
}
})
recognize(lang, whitelist).then(text => {
out.innerHTML = '認識完了！'
console.log(text)
textZone.innerHTML = text
})
}, false)
async function recognize(lang = 'eng', whitelist = '') {
const worker = createWorker({
langPath: '...',
logger: m => console.log(m),
});
await worker.load();
// 言語を設定
await worker.loadLanguage(lang);
await worker.initialize(lang);
// 限定する文字を設定
await worker.setParameters({
tessedit_char_whitelist: whitelist
});
// 認識
const { data: { text } } = await worker.recognize(canvas);
return text;
}
-
paint.js：canvasに文字を書きこむためのクラスPenを用意
ソースコードを表示
paint.js
// クラスを用意
class Pen {
_isDrawing = false;
get isDrawing() { return this._isDrawing }
set isDrawing(value) { this._isDrawing = value }
constructor(canvas) {
this.ctx = canvas.getContext('2d')
}
// 書き始める
begin(coord) {
this.isDrawing = true;
this.lastCoord = coord;
this.ctx.strokeStyle = 'black';
this.ctx.lineWidth = 4;
}
// 書き進める
push(coord) {
this.ctx.beginPath()
this.ctx.moveTo(this.lastCoord.x, this.lastCoord.y)
this.ctx.lineTo(coord.x, coord.y)
this.ctx.stroke()
this.ctx.closePath()
this.lastCoord = coord;
}
// 書き終える
close() {
this.isDrawing = false;
}
}
-
vector2.js：二次元ベクトルのクラスVector2を用意（今回はほとんど使われない）
ソースコードを表示
vector2.js
// クラスを用意
class Vector2 {
// x
get x() { return this._x }
set x(value) { this._x = value }
// y
get y() { return this._y }
set y(value) { this._y = value }
constructor(x = 0, y = 0) {
this.x = x;
this.y = y;
}
clone() { return new Vector2(this.x, this.y) }
add(v) {
const x = this.x + v.x;
const y = this.y + v.y;
return new Vector2(x, y);
}
sub(v) {
const x = this.x - v.x;
const y = this.y - v.y;
return new Vector2(x, y);
}
times(num) {
const x = this.x * num;
const y = this.y * num;
return new Vector2(x, y);
}
magnitude() {
return Math.sqrt(this.x * this.x + this.y * this.y)
}
get normalized() { return this.times(1/this.magnitude()) }
static zero = new Vector2( 0, 0)
static one = new Vector2( 1, 1)
static right = new Vector2( 1, 0)
static left = new Vector2(-1, 0)
static down = new Vector2( 0, 1)
static up = new Vector2( 0, -1)
}
結果
例によって、あまり精度は高くないです。マウスで書いた字とはいえ、もうちょっと精度が欲しいところ。
これは、認識してほしい、、
これはDではない。
これは5らしいです。
さかなー
おしい
おしい、漢字はほとんどうまくいかないです。
Cy 錫 粟 ン な M ペ ど′′` ヵ 0 和 (
まとめ
あまり使えないかもしれませんが、いろいろ試してみるのは楽しいです。皆さんもやってみてください。