Подтвердить что ты не робот

Как загрузить данные изображения с кодировкой base64 на S3 с использованием только JavaScript?

У меня есть приложение rails на Heroku (cedar env). У него есть страница, где я делаю данные холста в изображении с помощью метода toDataURL(). Я пытаюсь загрузить возвращенную строку данных изображения base64 непосредственно в s3 с помощью JavaScript (минуя серверную). Проблема в том, что, поскольку это не файл, как я могу загрузить данные, закодированные в base64, непосредственно на S3 и сохранить их в виде файла?

4b9b3361

ОТВЕТЫ

Ответ 1

Я нашел способ сделать это. После многого поиска, глядя на различные учебники.

Вам нужно преобразовать URI данных в blob, а затем загрузить этот файл на S3 с помощью CORS, если вы работаете с несколькими файлами, у меня есть отдельные запросы XHR для каждого.

Я нашел эту функцию, которая превращает ваш URI данных в blob, который затем можно загрузить на S3 напрямую, используя CORS (Преобразовать URI данных в Blob)

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'});
}

Вот отличный учебник по загрузке непосредственно на S3, вам нужно будет настроить код, чтобы позволить blob вместо файлов.

Ответ 2

Ответ Jamcoope очень хорош, однако конструктор blob не поддерживается всеми браузерами. В первую очередь Android 4.1 и Android 4.3. Существует Blob polyfills, но xhr.send(...) не будет работать с polyfill. Лучше всего сделать что-то вроде этого:

var u = dataURI.split(',')[1],
    binary = atob(u),
    array = [];

for (var i = 0; i < binary.length; i++) {
    array.push(binary.charCodeAt(i));
}

var typedArray = Uint8Array(array);

// now typedArray.buffer can be passed to xhr.send

Ответ 3

Если кто-то заботится: вот приведенная выше версия функции вышеперечисленного!

  convertToBlob = (base64) ->
    binary = atob base64.split(',')[1]
    array = []
    for i in [0...binary.length]
      array.push binary.charCodeAt i
    new Blob [new Uint8Array array], {type: 'image/jpeg'}