Jak przesłać zakodowane dane obrazu base64 do S3 przy użyciu JavaScript?

Question

Mam aplikację szyny na Heroku (cedr env). Ma stronę, na której renderuję dane obszaru roboczego do obrazu przy użyciu metody toDataURL(). Próbuję przesłać zwrócony ciąg danych obrazu base64 bezpośrednio do s3 przy użyciu JavaScript (z pominięciem strony serwera). Problem polega na tym, że skoro nie jest to plik, w jaki sposób mogę przesłać zakodowane dane base64 bezpośrednio do S3 i zapisać je jako plik?

Answer 1

Znalazłem sposób to zrobić. Po wielu poszukiwaniach oglądania różnych tutoriali.

Konieczne jest przekonwertowanie danych URI na blob, a następnie przesłanie tego pliku do S3 przy użyciu CORS, jeśli pracujesz z wieloma plikami, mam osobne żądania XHR dla każdego z nich.

Znalazłem tę funkcję, która zamienia URI danych do blob, które mogą być następnie przesłany do S3 bezpośrednio za pomocą CORS (Convert Data URI to 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'}); 
} 

Here is a great tutorial on uploading directly to S3, you will need to customise the code to allow for the blob instead of files.

Answer 2

Nie jestem pewien, czy OP już to rozwiązał, ale pracuję nad bardzo podobną funkcją. Przeprowadzając trochę badań, natknąłem się na te artykuły, które mogą być pomocne.

• http://blog.danguer.com/2011/10/25/upload-s3-files-directly-with-ajax/
• http://www.tweetegy.com/2012/01/save-an-image-file-directly-to-s3-from-a-web-browser-using-html5-and-backbone-js/

Answer 3

Jeśli ktoś dba: oto coffeescript wersja funkcji podana powyżej!

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

Answer 4

Odpowiedź Jamcoope jest bardzo dobra, jednak konstruktor blob nie jest obsługiwany przez wszystkie przeglądarki. Przede wszystkim Android 4.1 i Android 4.3. Istnieją wielokropki o numerach Blob, ale xhr.send(...) nie będzie działać z polyfill. Najlepszym rozwiązaniem jest coś takiego:

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