Speichern base64-codierte Bild zu FB Speicher
Mit FB 3.0.x, ist es möglich, zu speichern, die eine base64-codierte Bild der neuen FB-Storage-service?
Ich bin mit canvas-Bereich, um die Größe von Bildern im browser vor dem Upload und Ausgabe diese als base64-jpeg. Ich weiß, dass die Storage-api akzeptieren kann, Blobs, aber IE9-Unterstützung erforderlich ist, für mein Aktuelles Projekt.
- Eine Lösung, die für mich gearbeitet ist, in stackoverflow.com/questions/52157253/...
Du musst angemeldet sein, um einen Kommentar abzugeben.
Die neueste version der FB-SDK unterstützt base64 Bild hochlädt. Verwenden Sie einfach die
putString
Methode von FB Speicher.https://firebase.google.com/docs/reference/js/firebase.storage
Ein kleiner Nachteil ist, dass manchmal müssen Sie einen base64-String mit unnötigen Leerzeichen. Ich habe zum Beispiel festgestellt, dass die cordova-Kamera-plugin gibt base64 mit unnötigen Leerzeichen. Die Storage-SDK nicht laden, da die JavaScript nicht ausführen kann, es ist native
atob
Funktion - etwas, das die FB JS nicht unter der Haube. Sie haben strip whitespace - siehe DOM-Ausnahme 5 UNGÜLTIGES ZEICHEN " - Fehler auf gültige base64-Bild-Zeichenfolge in javascriptMüssen Sie nur die putString Funktion ohne Konvertierung in das BASE64, blob.
Stellen Sie sicher, pass die Metadaten {contentType:'image/jpg'} als der Dritte parameter (optional), um die Funktion putString, um Ihnen das abrufen der Daten in ein Bild-format.
oder einfach ausgedrückt:
Dann können Sie die downloadURL zu speichern, um FB.Datenbank() und/oder als src eine
<img>
tag.Ja, es ist möglich jetzt. Sie verwenden sollten, FB Lagerung neue Methode namens
putString
. Sie können Sie Lesen, spec hier.So, FB spec sagt, dass Sie jetzt zwei Methoden zum speichern Base64-string und Base64url string:
Aus meiner Erfahrung, mit
putString(message, 'base64url')
ständig gibt Fehler über schlecht formatierte Base64 string code: "storage/ungültig-format", Nachrichten: "FB Lagerung: String does not match format 'base64': Ungültiges Zeichen gefunden". Die Lösung ist abgeschnitten Anfang der Zeichenfolgedata:image/jpeg;base64,
und verwenden Sie die erste Methode, stattputString(message, 'base64')
. Dann funktioniert es.Wenn Sie
canvas.toBlob()
erhalten Sie diebyte[]
dass Sie brauchen, um passieren zu FB Speicher.Kurzes Beispiel:
Ansonsten müssen Sie konvertiert die base64-von sich aus, zum Beispiel mit
atob()
.Hier sind zwei Werte, die ich verwenden, um zu helfen, mit Unterstützung
.toBlob()
es ist weniger performant aber es bekommt den job getan.Dieser Methode wird der base64-string, der den Inhaltstyp
(IE: image/png)
und ein Rückruf, wenn der blob wurde konstruiert unter Verwendungatob()
Ich benutze diese Methode, um den base64-Wert einen direkten link, wenn notwendig, In meinem Fall ist es zum download ein Nutzer Facebook Foto, wenn Sie sich auf meine Bewerbung.
Unten ist, wie es aussieht, wenn das hinzufügen von Informationen zu FB Speicher
Incase Sie sich Fragen, upload_user_photo einfach uploads zu FB Speicher:
Für IE9 sehen diese polyfill: https://github.com/eligrey/Blob.js/blob/master/Blob.js