无法将大型html5画布POST到服务器？ [英] Can't POST large html5 canvas to server?

问题描述

我有一个你可以画的画布。我需要将它的内容保存到服务器，以便以后可以恢复。

为此，我 xMLHttpReq.send（*） encodeURIComponent（canvasP。 toDataURL（））* 通过 xMLHttpReq.open（POST，url，false）;

在我的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之间......

浏览器说正在上传...（xx％）直到完成。那么数据在哪里？ ：C

这是应用程序，自己试试（使用谷歌浏览器）：是65000字节，这是相当的接近你估计的限制。

事实上，你的服务器正在发送 X-Powered-By 标头，其值为 PHP / 5.2.6-1 + lenny9 。我用Google搜索了这个软件包版本，并在Debian网站上提到它是使用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（内容）; 
  

我认为你不需要 encodeURIComponent（）你有，因为 toDataURL（）编码为base64，这是url safe。

PHP：

  if（！empty（$ _ POST ['content']）&& is_array（$ _ POST [ 'content']））
 {
 $ content =''; 
 foreach（$ _POST ['content']作为$ part）
 {
 $ content。= $ part; 
} 
 $ content = base64_decode（$ content）; 
} 
  

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

这仍然是Suhosin的限制，但你可以通过这种方式发送更多数据。在您还必须使用多个阵列之前，您似乎将限制为阵列中64个65000字节的部分。但是，在这一点上，对于大多数人来说，它经常会变得太大而无法经常上传，最好以某种方式将更改发送到图像而不是整个图像。

I have a canvas that you can paint on. I need to save it's contents to the server so it can be resumed later.

To do this, I xMLHttpReq.send(*) the encodeURIComponent(canvasP.toDataURL())* via a xMLHttpReq.open("POST", url, false);

In my php script, I take the $_POST and base64_decode(json_decode($_POST[data])) and I save it to a .png file on the server.

NOW, this works fine and dandy if the canvas has a small doodle on it. BUT if the 1600x1200px canvas has a lot of stuff drawn on it, and it's like 600kB in size, my script fails, and I get a 0kB png on my server.

How do I fix this? How can I send a large canvas to the server?

Is the problem a limitation to _POST size? Because, no matter how large the canvas is, I can always download it via a window.open(canvasP.toDataURL(), "blabla");.

This is quite the dilemma for me. Any help will be much appreciated!

[EDIT] The PHP simply receives empty $_POST[data] for anything over ~50-something kB... So the problem has to occur between canvasP.toDataURL() and the POST-ing...

[EDIT2] Browser says "Uploading...(xx%)" until it's "done". SO WHERE DOES THE DATA GO? :C

[EDIT3] Here's the app, try it for yourself (use google chrome): http://students.info.uaic.ro/~tudor.berechet/

[EDIT4] Mike's answer seems to be right about suhosin

解决方案

It sounds very much like your php was compiled with Suhosin. The default limit of length for any post variable with Suhosin is 65000 bytes which is quite close to what you are estimating as your limit.

In fact, your server is sending the X-Powered-By header with a value of PHP/5.2.6-1+lenny9. I googled this package version and on the Debian website they mention it was built with Suhosin.

Since you do not have control over your server configuration, the solution would be to split up the canvas data into multiple variables below the post length limit of your server and then reassemble in PHP. If you check your phpinfo() it should show all these limits.

Edit - Added example code

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

I don't believe you need the encodeURIComponent() you have because toDataURL() encodes as base64 which is url safe.

PHP:

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

Not the most efficient method to do this, but it may help you.

This will still have it's limits with Suhosin, but you will be able to send much more data this way. Looks like you will be limited to 64 parts of 65000 bytes in an array before you will also have to use multiple arrays. However, at that point it will already getting way too large for most people to be uploading often and it would probably be better to send the changes to the image somehow instead of the whole image.

这篇关于无法将大型html5画布POST到服务器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！