Estoy teniendo problemas para cargar un blob creado en javascript en mi servidor. La idea básica es que un usuario cargue una imagen y, en javascript, recorte la imagen y la muestree antes de la transmisión.

La manipulación de la imagen funciona bien, pero la carga en sí misma no funciona correctamente. Aquí está el código que hace la carga y conversión de canvas a blob.

function uploadCanvasData()
{
    var canvas = $('#ImageDisplay').get(0);
    var dataUrl = canvas.toDataURL("image/jpeg");

    var blob = dataURItoBlob(dataUrl);

    var formData = new FormData();
    formData.append("file", formData);

    var request = new XMLHttpRequest();
    request.onload = completeRequest;

    request.open("POST", "IdentifyFood");
    request.send(formData);
}

function dataURItoBlob(dataURI)
{
    var byteString = atob(dataURI.split(',')[1]);

    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++)
    {
        ia[i] = byteString.charCodeAt(i);
    }

    var bb = new Blob([ab], { "type": mimeString });
    return bb;
}

El servidor afirma que no se cargaron archivos, y cuando uso Chrome para examinar la solicitud, veo la carga útil de la solicitud como:

------WebKitFormBoundaryyzYbm61DKgS09tpB
Content-Disposition: form-data; name="file"

[object FormData]
------WebKitFormBoundaryyzYbm61DKgS09tpB--

En contraste con la carga útil de un formulario que se envía coninput type="file"

------WebKitFormBoundaryUOn3WXb7pKLmOxRZ
Content-Disposition: form-data; name="imagefile"; filename="-3YQHiVaGWo.jpg"
Content-Type: image/jpeg


------WebKitFormBoundaryUOn3WXb7pKLmOxRZ--

Así que me parece que XMLHttpRequest solo está cargando el resultado de la llamadablob.toString()

¿Alguien sabe lo que estoy haciendo mal aquí? ¿Hay un mejor enfoque que debería estar usando?