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

この記事は 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じゃないとだめだった気がするのでそちらは注意してください。