이 글은 PlayCanvas Advent Calendar 2017 12일째 되는 글이다.
저번 보도의 발전 형식.

방법

toDataURL () 을 통해 얻은 캔버스 데이터는 aax를 통해 서버에 전송되고 서버 측의 php로 저장됩니다.

차리다

jQuery 가져오기

이번에는 jQuery를 사용하여 aax를 실현하고자 jQuery를 다운로드하여 플레이캔버스 프로젝트에 업로드합니다.
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의 $입니다.aax를 사용하여 POST에서 보냅니다.
screenshot.덮어쓰다
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) {
        }
    });
}

이미지가 서버에 저장됩니다.
캔버스 데이터가 커서 GET가 아닌 POST로 보냅니다.플레이캔버스의 개발환경부터 시행할 때는 최종점이 https가 아니면 안 된다는 느낌이 드니 유의하시기 바랍니다.