Images generated by JavaScript Canvas API aren't viewable when saved?

Question

Full code can also be found here: https://gist.github.com/1973726 (partially version on jsfiddle http://jsfiddle.net/VaEAJ/ obviously couldn't have php running with jsfiddle)

I initially wrote some code which took a canvas element and saved it as an image (see working code here: https://gist.github.com/1973283) and afterwards I updated it so it could process multiple canvas elements but the main difference now is that the image data is passed through to my PHP script via jQuery ajax method rather than via a hidden form field.

Problem is the images appear to be blank. They are about 200kb each when generated so they obviously have some content but when you preview the image nothing shows and when I try and open the image in Adobe Fireworks or another photo application I can't open the file.

The image data appears to be coming through to the server fine, but I'm really not sure why now when I write the image using base64_decode it would mean the images that are generated would no longer be viewable? The only thing I can think of is that maybe the posting of data via ajax isn't sending all the data through and so it's generating an image but it's not the full content and so the image is incomplete (hence why a photo application can't open it).

When checking the post data in Firebug it suggests that the limit has been reached? Not sure if that's what the problem is?

Answer 1

The problem was actually with sending data via XHR. I was using jQuery ajax method initially and then I swapped it out for my own ajax abstraction but the problem was still occuring until someone on twitter suggested I use FormData to pass the data to the server-side PHP. Sample is as follows... (full code can be seen here: https://gist.github.com/1973726)

// Can't use standard library AJAX methods (such as…)
// data: "imgdata=" + newCanvas.toDataURL()
// Not sure why it doesn't work as we're only abstracting an API over the top of the native XHR object?
// To make this work we need to use a proper FormData object (no data on browser support)
var formData = new FormData();
formData.append("imgdata", newCanvas.toDataURL());

var xhr = new XMLHttpRequest();
xhr.open("POST", "saveimage.php");
xhr.send(formData);

// Watch for when the state of the document gets updated
xhr.onreadystatechange = function(){
    // Wait until the data is fully loaded, and make sure that the request hasn't already timed out
    if (xhr.readyState == 4) {
        // Check to see if the request was successful
        if (checkHTTPSuccess(xhr)) {
            // Execute the success callback
            onSuccessfulImageProcessing(card, newCanvas, ctx, getHTTPData(xhr));
        }
        else {
            throw new Error("checkHTTPSuccess failed = " + e);
        }

        xhr.onreadystatechange = null;
        xhr = null;
    }
};

```