1
2

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-12-13

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

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

やり方

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

用意

jQuery導入

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

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

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

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2