HTML5でキャプチャした画像をPHPサーバに送信して保存する方法です。
これによってWebブラウザ上で撮った画像をサーバに送信、保存することが可能です。

以前のHTMLでカメラから映像、画像を取得する方法を参照してください。

HTML5 getUserMedia APIでカメラが使ってみる

Javascript側に以下を追加。
キャプチャ画像を撮影する後にさらに関数を追加してください。

// Ajaxにて画像データを送信する
var saveSnapshot = function() {
	var hostUrl= 'http://localhost/save.php'; // データ送信先
	$.ajax({
		url: hostUrl,
		type:'POST',
		dataType: 'json',
		data : {img : document.getElementById('img').src},
		timeout:10000,
		success: function(data) {
			// 成功
			alert("ok");
		},
		error: function(XMLHttpRequest, textStatus, errorThrown) {
			// 失敗
			alert("error");
		}
	});
}

save.php（画像保存）

<?php
// POSTされた画像データの取得
$img= $_POST["img"];

// ヘッダに「data:image/png;base64,」が付いているので、それは外す
$img= preg_replace("/data:[^,]+,/i","",$img);

// 残りのデータはbase64エンコードされているので、デコードする
$img= base64_decode($img);
 
// 文字列状態から画像リソース化
$image = imagecreatefromstring($img);
 
//画像として保存（ディレクトリは任意）
imagesavealpha($image, TRUE); // 透明色の有効
imagepng($image ,'./test.png');
?>

これで撮影した画像をサーバに保存することが可能です。
HTML5とPHPを使ってカメラの撮影からサーバへのアップロードも簡単に出来ました。
HTML5で出来る事の幅が急激に広がっているけどまだまだ使いこなしきれてない気がしますね・・・orz



«前の記事：HTML5 getUserMedia APIでカメラが使ってみるブラウザ上でSwiftの実行結果が確認できるサイト「RunSwift」：次の記事»