手書きサインを保存するサンプル

Posted on2022年7月16日投稿者: admin

先日、BtoCの事業を行っているクライアントからタッチパネルでサインをしてもらって画像として保存したいというご依頼をいただいたのでサンプルを作りました。
世の中便利でjsを公開してくださっている方がいらっしゃいました。

https://mam-mam.net/javascript/draw_js.html
WEBのcanvasに手書きやマウスのドラッグで絵や文字を書く

ということで保存して一覧表示させるサンプルを作成しました。リンクはこちら

index.html
<h2>サイン入力</h2><br>
<script src="./mamhandwritten.js"></script>
<script>
var mamHandwritten1=new TMamHandwritten("drawCanvasId","clearButtonId");
</script>
<canvas id="drawCanvasId" width="1000px" height="600px" style="border:1px solid #000;width:1000px;height:600px;"></canvas><br>
<input type="button" id="clearButtonId" value="クリア" style="width:160px;height:60px;font-size: x-large;font-weight: bold;" /><br>
<input type="button" onclick="mamHandwritten1.savePicture('draw.php');" value="保存する" style="width:160px;height:60px;font-size: x-large;font-weight: bold;" /><br>
<a href="./list.php">一覧へ</a>

draw.php
<a href="./index.html">入力画面へ</a>
<br>
<?php
$fileName = "images/image_" . date('YmdHis') . ".jpg";
$img = $_POST['imgpng'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$fileData = base64_decode($img);
// 保存
file_put_contents($fileName, $fileData);
?>
画像を表示<br>
<img src="<?=$fileName?>">

list.php
<a href="./index.html">入力画面へ</a>
<br>
<h2>画像一覧</h2><br>
<?php
$path = "./images/";
$files = glob($path . "*.jpg");
foreach($files as $fileName){
	echo "ファイル名：" . $fileName . "<br />";
	echo "<img src='" . $fileName . "'>" . "<br />";
}
?>