Convert Data URI to File then append to FormData

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

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

function 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 there, appending the data to a form such that it will be uploaded as a file is easy:

var dataURL = canvas.toDataURL('image/jpeg', 0.5);var blob = dataURItoBlob(dataURL);var fd = new FormData(document.forms[0]);fd.append("canvasImage", blob);

BlobBuilder and ArrayBuffer are now deprecated, here is the top comment's code updated with Blob constructor:

function dataURItoBlob(dataURI) {    var binary = atob(dataURI.split(',')[1]);    var array = [];    for(var i = 0; i < binary.length; i++) {        array.push(binary.charCodeAt(i));    }    return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});}

This one works in iOS and Safari.

You need to use Stoive's ArrayBuffer solution but you can't use BlobBuilder, as vava720 indicates, so here's the mashup of both.

function dataURItoBlob(dataURI) {    var byteString = atob(dataURI.split(',')[1]);    var ab = new ArrayBuffer(byteString.length);    var ia = new Uint8Array(ab);    for (var i = 0; i < byteString.length; i++) {        ia[i] = byteString.charCodeAt(i);    }    return new Blob([ab], { type: 'image/jpeg' });}