ちら裏メモ

TOP 　＞　画像に書き込みする

作成日：2025年05月12日

画像に書き込みする

どうも、にゃん太です

既にある画像に手書きで追記したい場合があります

例えば、まちがい探しで見つけた箇所に丸を付けたりとか？

今回のメモでは、画像をWEBビューアで表示し、書き込み後に再保存する手順を書いていきます

WEBビューアで手書きする

WEBビューアとJavascriptを使用すれば、手書きする仕組みを作成する事ができます

以前書いたメモで「文字を手書きする」を書いていますので、詳しくはそちらを参照してください

画像に追記する

では、画像に追記する方法です

とは言っても単純で、手書き前にブランクだったCANVASに画像データを事前に書き込んでやればよいのです

手順としては画像保存する場合の逆ですね

JavascriptからFileMakerへ画像をリクエストする
FileMakerで画像をBase64エンコードする
画像データをJavascriptへ返す
画像データをCANVASへ取り込む

それでは、処理を書いていきましょう

FileMakerへ画像のリクエスト

この処理では、WEBビューア内のボタンを押すと、FileMaker側へスクリプトの実行命令をします

Javascript
/*画像リクエスト*/
document.getElementById('getImage').onclick = function(){
  FileMaker.PerformScript ('getImage');
};

「getImage」というIDのボタンを押すと、FileMakerの「getImage」というスクリプトを実行します

FileMakerで画像をBase64エンコードする

次は、FileMakerのフィールドに保存された画像をBase64エンコードします

その後、呼び出し元へ値を引き渡せればよいのですが、残念ながら非同期処理となっています

そのため、そのデータを引数に別途Javascriptを実行します

スクリプト
# ##################################################
# getImage
# ##################################################

変数を設定 [$data; 値: "data:image/png;base64," & Base64EncodeRFC ( 4648; data::ベース画像 )]
WebビューアでJavaScriptを実行 [オブジェクト名: "web"; 関数名: "drawImage"; 引数: $data]

画像データをCANVASへ取り込む

FileMakerのスクリプトから呼び出しを受けて、引数をCANVASへ描画します

Javascript
/* 画像をCANVASへ描画 */
function drawImage(img){
  let image = new Image();
  image.onload = function(){
    ctx.drawImage(image, 0, 0, 520, 350);
  };
  image.src = img;
};

これで、画像をCANVASへ描画できましたので、後は以前書いた通りに描画処理、保存処理を組み込めばOKです。

一連の処理を連結した完成形が下記の通りとなります

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 style='display:flex; width:620px'>
  <canvas id='handWriteBox' width=520 height=350 style='border:1px solid #000;'></canvas>
  <div style='margin-left:20px; width:80px;'>
    <button id='getImage' style='margin-bottom:20px; width:80px; height:80px;'>getImage</button>
    <button id='saveImage' style='margin-bottom:20px; width:80px; height:80px;'>Save</button>
    <button id='boxClear' style='width:80px; height:80px;'>Clear</button>
  </div>
</body>
<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.strokeStyle = '#F00';

/* 描画 */
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.fillStyle = rgba(0, 0, 0, 0);
  ctx.fillRect(0, 0, hwb.width, hwb.height);
};

/* 手書き画像をフィールドへ保存 */
document.getElementById('saveImage').onclick = () => {
  let png = hwb.toDataURL('image/png');
  FileMaker.PerformScript ('saveImage', png, 0);
};

/* 画像をリクエスト */
document.getElementById('getImage').onclick = () => {
  FileMaker.PerformScript ('getImage');
};

/* 画像をCANVASへ描画 */
function drawImage(img){
  let image = new Image();
  image.onload = function(){
    ctx.drawImage(image, 0, 0, 520, 350);
  };
  image.src = img;
};
</script>
</html>"

スクリプト
# ##################################################
# saveImage
# ##################################################

変数を設定 [$param; 値: Get ( スクリプト引数 )]
フィールド設定 [data::手書き画像; Base64Decode ( Middle ( $param; 22; Length ( $param ) - 21 ); "canvas.png" )]

スクリプト
# ##################################################
# getImage
# ##################################################

変数を設定 [$data; 値: "data:image/png;base64," & Base64EncodeRFC ( 4648; data::ベース画像 )]
WebビューアでJavaScriptを実行 [オブジェクト名: "web"; 関数名: "drawImage"; 引数: $data]

以上で画像に追記して保存する処理は完成となります

出来上がりはこんな感じです

サンプルファイル

今回作成したファイルを公開していますので、ご興味がありましたらこちらからダウンロードしてご確認ください

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

内容はいかがでしたか？

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

ご連絡フォーム

概要連絡内容メールアドレス