Wie hoch base64-codierte Bilddaten zu S3 mit JavaScript nur?

Ich habe eine rails-app auf Heroku (cedar env). Es hat eine Seite, wo ich das Rendern der canvas-Daten in ein Bild mit toDataURL() Methode. Ich versuche zum hochladen der zurückgegebene Bild-Daten-base64-string direkt in s3 mit JavaScript (unter Umgehung der server-Seite). Das problem ist, dass da dies ist nicht eine Datei wie lade ich die base64-codierten Daten direkt auf S3 und speichern Sie es als Datei gibt?

InformationsquelleAutor Zain Zafar | 2012-10-14
  1. 26

    Ich habe einen Weg gefunden, dies zu tun. Nach viel recherche einen Blick auf verschiedene tutorials.

    Müssen Sie konvertieren die Daten, die URI zu einem blob und dann hochladen, die Datei zu S3 mit CORS, wenn Sie mit mehreren Dateien arbeiten, habe ich separate XHR-Anfragen für jeden.

    Fand ich diese Funktion macht aus Ihrem Daten-URI in einen blob, die dann auf S3 hochgeladen, die direkt mit CORS (Konvertieren von Daten-URI zu 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'});
}

    Hier ist ein tolles tutorial zum hochladen direkt an der S3, die Sie benötigen, um Ihren code zu ermöglichen, die für die blob-statt-Dateien.

    InformationsquelleAutor jamcoupe
  2. 5

    Jamcoope die Antwort ist sehr gut, jedoch ist die blob-Konstruktor wird nicht von allen Browsern unterstützt. Vor allem android 4.1 und android 4.3. Es gibt Blob polyfills, aber xhr.send(...) arbeiten nicht mit dem polyfill. Die beste Wette ist so etwas wie dieses:

    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
    InformationsquelleAutor chevett
  3. 3

    Wenn jemand ' s interessiert: hier ist der coffescript-version die Funktion, die oben gegeben!

      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'}
    InformationsquelleAutor Michel
  4. 1

    Nicht sicher, ob die OP hat bereits das Problem gelöst, aber ich arbeite auf eine sehr ähnliche Funktion. In der dabei ein wenig Forschung, stieß ich auf diese Artikel, die hilfreich sein könnten.

    InformationsquelleAutor user553180
Schreibe einen Kommentar