7

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.

Patrick Roberts
  • 49,224
  • 10
  • 102
  • 153
  • I don't know of a way to use multipart form data, but have you tried `canvas.toDataURL()` (base64 encoding) and AJAX? Does this crash the client's browser? – Aletheios Jul 29 '12 at 09:35
  • 1
    toDataURL() itself doesn't crash the browser, but trying to do anything with it like posting it normally DOES crash the browser. I used to have this application posting to a php server, but now I'm converting to node.js, so I'm not sure how different it will be, but I bet somebody out there knows how to do what I'm asking. – Patrick Roberts Jul 29 '12 at 09:38
  • Why would that "crash the browser"? That seems highly doubtful. *edit* oh wait, just saw the 50MB part. – Pointy Jul 29 '12 at 09:41
  • "it tends to crash the client's browser" **WITH OR WITHOUT AJAX?** Without AJAX it should be no problem – Adam Gradzki Nov 10 '17 at 16:37

1 Answers1

8

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

Esailija
  • 138,174
  • 23
  • 272
  • 326
  • 1
    @PatrickRoberts I said that it [canvas.toBlob] was not implemented, so it's not supported at all without the polyfill. The argument to the `FormData` constructor is an optional Form element, not a `blob`. [`Syntax new FormData ([in HTMLFormElement form])`](https://developer.mozilla.org/en/XMLHttpRequest/FormData) – Esailija Jul 29 '12 at 09:50
  • @PatrickRoberts what do you mean? If there is `FormData`, there is `FormData#append`. If there is canvas, there is `FormData`. You can't add a file to a form yourself, btw. What that would do is submit a huge string in base64, which is not only 33% larger than the file itself, there is no file submit optimizations made if such thing even exists. – Esailija Jul 29 '12 at 10:02
  • @PatrickRoberts any reference to that [FormData without append]? And what's wrong with the `.toBlob` implementation? You have to convert the canvas data to a blob anyway to use `FormData`. – Esailija Jul 29 '12 at 10:07
  • Hey just to answer your question in chat I never answered, the 50 MB images I was referring to were fractals. Since this post I've made about 3 different versions of my fractal generator in HTML5 and JavaScript using that polyfill (attaching an object URL of the blob to an anchor with the download attribute instead) and it works great. I also recently made a 10k resolution fractal that was about 98 MB in size and I have no memory issues with the toBlob polyfill in Chrome, so thanks again! – Patrick Roberts Nov 01 '15 at 08:57