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 e

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.