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

【问题标题】：Saving HTML5 canvas data to server将 HTML5 画布数据保存到服务器
【发布时间】：2012-02-16 23:01:52
【问题描述】：

我知道对此有很多问题，但目前我正在尝试将用户创建的 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，因此我不确定如何完成此操作。

感谢任何建议，

亚历克斯

【问题讨论】：

你能保存画布并成功渲染回来吗？

标签： php ajax html canvas

【解决方案1】：

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

【讨论】：