クリック画像の実寸表示

段ボール箱を机にした猫 ファイルメーカー（filemaker）のちらしの裏のメモ書き

TOP 　＞　 文字を手書き入力する（２）
作成日：2024年07月31日

文字を手書き入力する（２）

イメージイラスト
にゃん太

どうも、にゃん太です

今回のメモでは、文字を手書き入力する（１）の続きです

前回は手書き文字を書くところまで進めたので、今回は保存から文字認識までを書いていきます


CANVASに書いた文字を画像としてオブジェクトフィールドへ保存
前回、ファイルメーカー上で手書きできる所まで進めました
次は、手書きした画像をオブジェクトフィールドに保存する処理を行います
まずはJavaScriptで画像データをファイルメーカーのスクリプトへ引き渡します
WEBビューアに記載したコードに一部追記します
WEBビューア

"data:text/html,
<!DOCTYPE html>
<html lang='ja'>
<head>
  <meta charset='UTF-8'>
  <meta http-equiv='content-language' content='ja'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=1'>
</head>
<body>
  <canvas id='handWriteBox' width=325 height=100 style='border:1px solid #000;'></canvas>
  <button id='boxClear' class='btn' type='button'>Clear</button>
  <button id='boxSave' style='margin-top: 10px; padding: .3em .5em; font-size:16px;'>Save</button>
  <button id='handWrite2Text' style='margin-top: 10px; padding: .3em .5em; font-size:16px;'>toText</button>
</body>
</html>
<script>
const hwb = document.getElementById('handWriteBox');
const ctx = hwb.getContext('2d');
let writing = false;
let lastPosition = { x: null, y: null };

/* 線の形状, 太さ */
ctx.lineCap = 'round';
ctx.lineWidth = 2;
ctx.fillStyle = '#FFF';
ctx.fillRect(0, 0, hwb.width, hwb.height);

/* 描画 */
function draw(x, y) {
  if(writing){
    if(lastPosition.x !== null && lastPosition.y !== null){
      ctx.moveTo(lastPosition.x, lastPosition.y);
      ctx.lineTo(x, y);
      ctx.stroke();
    }
    lastPosition.x = x;
    lastPosition.y = y;
  }
}

/* 描画の開始 */
function lineStart() {
  ctx.beginPath();
  writing = true;
}

/* 描画の終了 */
function lineEnd() {
  ctx.closePath();
  writing = false;
  lastPosition.x = null;
  lastPosition.y = null;
}

/* PC用 */
hwb.addEventListener('mousedown', lineStart);
hwb.addEventListener('mouseup', lineEnd);
hwb.addEventListener('mouseout', lineEnd);
hwb.addEventListener('mousemove', (e) => {
  draw(
    e.layerX - hwb.getBoundingClientRect().left,
    e.layerY - hwb.getBoundingClientRect().top
  );
});

/* スマホ、タブレット用 */
hwb.addEventListener('touchstart', lineStart);
hwb.addEventListener('touchcancel', lineEnd);
hwb.addEventListener('touchend', lineEnd);
hwb.addEventListener('touchmove', (e) => {
  e.preventDefault();
  draw(
    e.touches[0].clientX - hwb.getBoundingClientRect().left,
    e.touches[0].clientY - hwb.getBoundingClientRect().top
  );
});

/* 描画の削除 */
document.getElementById('boxClear').onclick = () => {
  ctx.clearRect(0, 0, hwb.width, hwb.height);
  ctx.fillRect(0, 0, hwb.width, hwb.height);
};

/* 手書き文字を保存 */
document.getElementById('boxSave').onclick = () => {
  let jpeg = hwb.toDataURL('image/jpeg');
  let a = document.createElement('a');
  a.href = jpeg;
  a.download = 'tegakimoji.jpeg';
  a.click();
  a.remove();
};

/* 手書き文字をスクリプトへ送信 */
document.getElementById('handWrite2Text').onclick = () => {
  let jpg = hwb.toDataURL('image/jpeg');
  FileMaker.PerformScriptWithOption ('toText', jpg, 0);
};
</script>"

赤字部分が追記箇所です
13行目では、新たに「toText」というボタンを追加し、94～98行目がそのボタンをクリックした時の処理となります
96行目でCANVASを画像データ化し、97行目で「toText」スクリプトに画像データを引数として送信しています

次に、「toText」スクリプトの処理です
引数として受け取った画像データをオブジェクトフィールドに張り付け、その画像からテキストを読み取る処理です
toText

フィールド設定 [test::画像; Base64Decode ( Middle ( Get ( スクリプト引数 ); 23; Length ( Get ( スクリプト引数 ) ) - 22); "canvas.png" )]
フィールド設定 [test::画像からテキスト; GetLiveText ( test::画像; "ja-JP" )]

これで完成です
それでは、実際に動作させてみましょう
尚、ここまでWINDOWS環境で進めてきましたが、GetLiveTextはMACもしくはiOSでしか使用できませんので、動作テストはMACで行います
手書き文字からテキストの取得
無事、文字認識できました！
文字認識精度もかなり高く、実用性はあるのではないでしょうか

メモ書き終了の案内イラスト

以上で今日のメモ書きは終了です

内容はいかがでしたか？

もしご意見やご要望、誤りの指摘などありましたら、下記フォームよりお気軽にご連絡ください

ご連絡フォーム