Question

我知道有很多关于此的问题，但目前我正在尝试将用户创建的HTML5画布数据保存到我的Web服务器上的特定文件夹中。

我已经可以使用以下方法将图像保存到服务器：

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文件

<?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 );
}
?>

我希望能够做的是在图像旁边传递一些更多的变量，这样我就可以在saveFrame.php文件中使用PHP动态查找我的数据库，以确定应该保存哪个文件名。我不确定如何实现这一点，因为我不习惯使用AJAX。

感谢任何建议，

亚历

Answer 1

您可以使用html5 canvaspixelarray属性来获取画布数据。

将HTML5画布数据保存到服务器

1 个答案: