Преобразуйте URI данных в файл, затем добавьте в FormData

Question

Я пытался повторно внедрить загрузчик изображений HTML5, такой как на сайте Mozilla Hacks , но он работает с браузерами WebKit.Часть задачи состоит в том, чтобы извлечь файл изображения из объекта canvas и добавить его к объекту FormData для загрузки.

Проблема заключается в том, что canvas имеет toDataURL функция, возвращающая представление файла изображения, объект FormData принимает только объекты File или Blob из File API .

Решение Mozilla использовало следующую функцию только для Firefox на canvas:

var file = canvas.mozGetAsFile("foo.png");

... который недоступен в браузерах WebKit.Лучшее решение, о котором я могу подумать, - это найти способ преобразовать URI данных в объект File, который, как мне показалось, может быть частью File API, но я не могу на всю жизнь найти что-то для этого.

Возможно ли это?Если нет, то какие-нибудь альтернативы?

Спасибо.

Answer 1

Спасибо! @steovi для этого решения.

Я добавил поддержку версии ES6 и изменил с unescape на dataURI (unescape устарел).

converterDataURItoBlob(dataURI) {
    let byteString;
    let mimeString;
    let ia;

    if (dataURI.split(',')[0].indexOf('base64') >= 0) {
      byteString = atob(dataURI.split(',')[1]);
    } else {
      byteString = encodeURI(dataURI.split(',')[1]);
    }
    // separate out the mime component
    mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], {type:mimeString});
}

Answer 2

сделать проще: D

function dataURItoBlob(dataURI,mime) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs

    var byteString = window.atob(dataURI);

    // separate out the mime component


    // write the bytes of the string to an ArrayBuffer
    //var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    // write the ArrayBuffer to a blob, and you're done
    var blob = new Blob([ia], { type: mime });

    return blob;
}

Answer 3

У меня была точно такая же проблема, как у Равиндера Паяла, и я нашел ответ.Попробуйте это:

var dataURL = canvas.toDataURL("image/jpeg");

var name = "image.jpg";
var parseFile = new Parse.File(name, {base64: dataURL.substring(23)});

Answer 4

toDataURL дает вам строку, и вы можете поместить эту строку в скрытый ввод.