Canvasの画像をPHPに送信して保存する
Canvasの画像をPHPに送信して保存する方法を解説します。
HTML・JavaScriptのソースコード
<html><head>
<script>
// Canvasを取得
var cnvs = document.getElementById('canvas');
// テストで青で四角、赤で現在日時を描く
var ctx = cnvs.getContext('2d');
ctx.fillStyle = '#0000ff';
ctx.fillRect(0,0,128,128);
var date1 = new Date();
ctx.font = '24px serif';
ctx.fillStyle = '#ff0000';
ctx.fillText(date1.toLocaleString(), 150, 70);
/**
* 送信ボタン クリック
*/
function click_send() {
// Canvasから画像URL取得
var img_url = cnvs.toDataURL("image/png");
// 不要部分除去
img_url = img_url.replace(new RegExp("data:image/png;base64,"), "");
// Hiddenに画像を乗せる
document.getElementById('upload_data').value = img_url;
// Form送信
document.form1.submit();
}
</script>
</head>
<body>
<!-- Canvas -->
<canvas id="canvas" width="500px" height="200px" style="border: solid 1px #222;">
<!-- Form -->
<form method="post" name="form1" action="送り先">
<!-- Hiddenデータ -->
<input type="hidden" id="upload_data" name="upload_data">
<!-- 送信ボタン -->
<input type="button" value="送信" onclick="click_send()">
</form>
</body>
</html>
PHPのソースコード
<?phpif (!empty($_POST['upload_data'])) {
// データが送られてきた場合
$upload_data = $_POST['upload_data'];
// デコード
$upload_data = base64_decode($upload_data);
// test.pngに保存
$fp = fopen('test.png', 'w');
fwrite($fp, $upload_data);
fclose($fp);
}
?>
テスト
Canvasに描かれた画像をPHPに送信し画像を保存、保存した画像を表示します。