无法将大型 html5 画布发布到服务器？

Question

我有一个画布，你可以在上面画画。我需要将其内容保存到服务器，以便稍后恢复。

为此，我通过xMLHttpReq.open("POST", url, false);xMLHttpReq.send(*)encodeURIComponent(canvasP.toDataURL())*

在我的 php 脚本中，我使用 $_POST 和 base64_decode(json_decode($_POST[data])) 并将其保存到服务器上的 .png 文件中。

现在，如果画布上有一个小涂鸦，这会很好用。但是，如果 1600x1200px 画布上绘制了很多东西，并且大小约为 600kB，我的脚本就会失败，并且我的服务器上会得到一个 0kB 的 png。

我该如何解决这个问题？如何将大画布发送到服务器？

问题是 _POST 大小的限制吗？因为无论画布有多大，我都可以通过window.open(canvasP.toDataURL(), "blabla"); 下载。

这对我来说是个难题。任何帮助将不胜感激！

[编辑] PHP 只接收空的$_POST[data] 任何超过〜50-something kB... 所以问题必须发生在canvasP.toDataURL()和POST-ing之间......

[EDIT2] 浏览器说“正在上传...(xx%)”，直到它“完成”。那么数据去哪儿了？ :C

[EDIT3] 这是应用程序，自己尝试一下（使用谷歌浏览器）：http://students.info.uaic.ro/~tudor.berechet/

[EDIT4] Mike 对 suhosin 987654322@的回答似乎是正确的

Answer 1

听起来很像你的 php 是用Suhosin 编译的。使用 Suhosin 的任何 post 变量的 default limit 长度为 65000 字节，非常接近您估计的极限。

实际上，您的服务器正在发送值为PHP/5.2.6-1+lenny9 的X-Powered-By 标头。我用谷歌搜索了这个软件包版本，在 Debian 网站上他们提到它是built with Suhosin。

由于您无法控制服务器配置，解决方案是将画布数据拆分为多个变量，低于服务器的帖子长度限制，然后在 PHP 中重新组合。如果您检查您的phpinfo()，它应该会显示所有这些限制。

编辑 - 添加示例代码

Javascript：

var canvasData = canvasP.toDataURL(); 
var length = canvasData.length;
var content = '';
var index = 0;
var limit = 64999;
var l;
while (length > 0) {
    if (length <= limit)
        l = length;
    else
        l = limit;

    content += '&content[]=' + canvasData.substr(index * limit, l);
    length -= l;
    index++;
}

xhr.send(content);

我认为您不需要 encodeURIComponent()，因为 toDataURL() 编码为 base64，这是 url 安全的。

PHP：

if (!empty($_POST['content']) && is_array($_POST['content']))
{
    $content = '';
    foreach ($_POST['content'] as $part)
    {
        $content .= $part;
    }
    $content = base64_decode($content);
}

这不是最有效的方法，但它可能会对您有所帮助。

Suhosin 仍然有其限制，但您可以通过这种方式发送更多数据。在您还必须使用多个数组之前，看起来您将被限制为数组中 65000 个字节的 64 个部分。但是，到那时，对于大多数人来说，它已经变得太大而无法经常上传，并且以某种方式将更改发送到图像而不是整个图像可能会更好。