How to submit html5 canvas as part of form post?

Question

I'm looking to stream the image data from a canvas tag to a node.js server. I can handle the server-side code myself, but how can I submit the data from a canvas? I'm hoping for a suggestion involving multipart form data because I want to stream the data, since I'm expecting images in the ballpark of 50 MB or so. If I try to post the data all at once, it tends to crash the client's browser.

Answer 1

You can use FormData to emulate a normal "multipart/form-data" file submit:

canvas.toBlob( function(blob) {

    var formData = new FormData();

    formData.append("image_file", blob );
    var xhr = new XMLHttpRequest;
    xhr.open( "POST", "abc.php" );
    xhr.send(formData);

}, "image/png");

The canvas method .toBlob is specified but not implemented, you can use a polyfill such as canvas-to-blob.js