【iDempiere Lab】Canvasタグを使用して署名(サイン)を画像として保存してみる

HTMLのCanvasタグを使用すると、JavaScriptを使用して、ブラウザ内で絵を書くことができます。このコンテンツではiDempiere/JPiere内でCanvasを使用して、ユーザーが手書き入力した署名(サイン)を画像として保存して、添付ファイルする方法について調査及び研究し、その成果をまとめています。

研究シナリオ

iDempiere/JPiereから契約書をPDF出力して、そこで署名(サイン)してもらうことを想定しています。契約書自体は、ジャスパーレポートを使用して作成すれば、簡単に作成できるかなと思います。

契約書に署名(サイン)する

JPiereでは契約書を管理して、契約内容に応じて伝票を自動作成する、契約管理という機能があります。

【JPIERE-0363】契約管理

この契約管理の機能から、プリントアイコンをクリックして契約書を出力し、署名(サイン)します。

契約書
契約書

 プリンターアイコンをクリックすると、ジャスパーレポートで作成された契約書が表示されます(下記の契約書はかなり雑ですが、イメージということで・・・。^^;)

ジャスパーレポートの契約書
ジャスパーレポートの契約書

ジャスパーレポートを表示しているタブにアイコンを配置して、クリックして表示されるポップアップウィンドウで、Canvasタグを使用して署名(サイン)できるようにします。

Canvasタグを活用した署名(サイン)
Canvasタグを活用した署名(サイン)

署名(サイン)して、右下のOKボタンを押すと、添付ファイルされるようにしてみました。

添付ファイルの機能は、JPiereオリジナル添付ファイルの機能を活用し、ハッシュ値を保存して、改ざんが無いことを証明できるようにも配慮してみました!

【JPIERE-0555(v9)】JPiereオリジナル添付ファイル管理-2022年電子帳簿保存法対応

署名(サイン)の画像ファイルは、該当する契約書のレコードに添付されます。

添付された署名(サイン)の画像
添付された署名(サイン)の画像
添付ファイルの画像の確認
添付ファイルの画像の確認

添付されている署名(サイン)の画像は、ハッシュ値を付けて保存できるので、改ざんしていないことを証明することもできるかなと思います。

添付ファイル台帳
添付ファイル台帳