Edited at

【PlayCanvas】画面をキャプチャして外部サーバーに保存する

More than 1 year has passed since last update.

この記事は PlayCanvas Advent Calendar 2017 の12日目の記事です。

前回の記事の発展形です。


やり方

toDataURL()で取得したキャンバスデータをajaxでサーバーに送信し、サーバー側のphpで保存する方法をとります。


用意


jQuery導入

今回はajaxの実装はjQueryを使ってやろうと思うので、jQueryをダウンロードしPlayCanvasプロジェクトにアップロードします。

http://jquery.com/download/

Script Loading orderからjQueryのライブラリを#1に持っていきます。


php用意

以下のphpをサーバーに保存します。


saveimage.php

<?php

//canvasデータがPOSTで送信されてきた場合
$canvas = $_POST["canvasData"];

//画像データが正しく入っていたら
//ヘッダに「data:image/png;base64,」が付いているので、それは外す
$canvas = preg_replace("/data:[^,]+,/i","",$canvas);

//残りのデータはbase64エンコードされているので、デコードする
$canvas = base64_decode($canvas);

//まだ文字列の状態なので、画像リソース化
$image = imagecreatefromstring($canvas);

//画像として保存(ディレクトリは任意)
imagesavealpha($image, TRUE); // 透明色の有効
imagepng($image ,'images/image.png');
?>



PlayCanvasからpost

jQueryの$.ajaxを使ってPOSTで送信します。

screenshot.jsを書き換えます。


screenshot.js

Screenshot.prototype.takeScreenshot = function () {

// Get application canvas element
var canvas = document.getElementById ('application-canvas');

// Get image data from canvas
var imageData = canvas.toDataURL ();
//サーバーに送信
captureSendServer(imageData);
};

function caputureSendServer(data){
$.ajax({
type: "POST",
url:"https://hogehoge.com/saveimage.php",//phpファイルのURL
data: {
"canvasData": data
},
success: function(j_data){
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});
}


これでサーバーに画像が保存されます。

canvasDataは大きいのでGETではなくPOSTで送信しています。PlayCanvasの開発環境から実行するときはエンドポイントがhttpsじゃないとだめだった気がするのでそちらは注意してください。