How To Submit Html5 Canvas As Part Of Form Post?

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

Solution 1:

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

canvas.toBlob( function(blob) {

    var formData = newFormData();

    formData.append("image_file", blob );
    var xhr = newXMLHttpRequest;
    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