How to send html5 canvas as part of a form post?

Question

I am looking for an image data stream from a canvas tag to node.js. I can process the server code myself, but how can I send data from the canvas? I hope for a proposal related to multi-page form data because I want to transfer data since I expect images in a stadium of 50 MB or so. If I try to publish the data right away, this will cause the client browser to crash.

Answer 1

You can use FormData to emulate the usual file "multipart/form-data" 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"); 

.toBlob canvas .toBlob specified but not implemented, you can use polyfill for example canvas-to-blob.js