How to upload/POST multiple canvas elements

Uploading files one by one is better. Requires less memory and as soon as one file ready to upload, the upload can be started instead of waiting while all files will be prepared.

Use FormData to send files. Allows to upload files in binary format instead of base64 encoded.

var formData = new FormData;

If Firefox use canvas.mozGetAsFile('image.jpg') instead of canvas.toDataUrl(). Allow to avoid unnecessary conversion from base64 to binary.

var file = canvas.mozGetAsFile('image.jpg');formData.append(file);

In Chrome use BlobBuilder to convert base64 into blob (see dataURItoBlob function

acceptedAfter playing around with a few things, I managed to figure this out myself.

First of all, this will convert a dataURI to a Blob:

//added for quick referencefunction dataURItoBlob(dataURI) {    // convert base64/URLEncoded data component to raw binary data held in a string    var byteString;    if (dataURI.split(',')[0].indexOf('base64') >= 0)        byteString = atob(dataURI.split(',')[1]);    else        byteString = unescape(dataURI.split(',')[1]);    // separate out the mime component    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];    // write the bytes of the string to a typed array    var ia = new Uint8Array(byteString.length);    for (var i = 0; i < byteString.length; i++) {        ia[i] = byteString.charCodeAt(i);    }    return new Blob([ia], {type:mimeString});}

From this question):

var blob = dataURItoBlob(canvas.toDataURL('image/jpg'));formData.append(blob);

And then send the formData object. I'm not sure how to do it in jQuery, but with plain xhr object it like so:

var xhr = new XMLHttpRequest;xhr.open('POST', 'upload.ashx', false);xhr.send(formData);

On server you can get files from Files collection:

context.Request.Files[0].SaveAs(...);