Can't POST large html5 canvas to server?

Question

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

Answer 1

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.