Сохранение данных холста HTML5 на сервер

Question

Я знаю, что есть много вопросов по этому поводу, но в настоящее время я пытаюсь сохранить созданные пользователем данные холста HTML5 в определенную папку на моем веб-сервере.

Я уже могу сохранить изображение на сервер, используя следующее:

function sendData(postData){
var ajax = new XMLHttpRequest();
ajax.open("POST",'saveFrame.php',true);
ajax.setRequestHeader('Content-Type', 'canvas/upload');

var comicID = document.getElementById('comicID').value;

ajax.onreadystatechange=function()
{
    if (ajax.readyState == 4)
    {
        alert("Frame saved");
    }
}
ajax.send(postData);
}

saveFrame.PHP File

<?php

if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
    // Get the data like you would with traditional post
    $rawImage=$GLOBALS['HTTP_RAW_POST_DATA'];

    // Remove the headers  
    $removeHeaders=substr($rawImage, strpos($rawImage, ",")+1);

    // decode it from base 64 and into image data only
    $decode=base64_decode($removeHeaders);

    // save to your server
    $saveName = "test.jpeg";
    $fopen = fopen($saveName, 'wb' );
    fwrite( $fopen, $decode);
    fclose( $fopen );
}
?>

То, что я хочу сделать, это передать еще несколько переменных вдоль изображения, чтобы я мог динамически искать свою базу данных с помощью PHP в файле saveFrame.php, чтобы определить, какое имя файла следует сохранить. Я не уверен, как это сделать, так как я не привык использовать AJAX.

Любой совет приветствуется,

Alex

Answer 1

Вы можете использовать свойство html5 canvaspixelarray для получения данных холста.