Download a base64 image using Firebase Storage

Question

I am creating this application where users can have a profile picture (but only one picture each). Everything is set up for me, but when the pictures are 2 MB +, it takes some time to download, and in fact I just need 50 kB images (only a small image display, maximum 40 pixels). I did some code to put the images directly in a real-time database (convert to canvas and make them a base64 string of 7kb). However, this is not very clean, and it is better to use Firebase Storage.

Starting with the new update 3.3.0, you can load Base64 formatted strings into Storage using the putString () method. However, when I upload my canvas image (which starts with "data: image / jpeg; base64"), I get an error message:

v {code: "storage / invalid-format", message: "Firebase Storage: String does not match the format 'base64': Invalid character found", serverResponse: null, name: "FirebaseError"} .

Does this error occur due to the canvas image line at the beginning? I searched all the Stack, but I can not find the answer.

Answer 1

, , , , . , base64 23 (: "data: image/jpeg; base64" ) Firebase. , :

var storageRef = firebase.storage().ref().child("Whatever your path is in Firebase Storage");
var imageRef = "Your path in the Realtime Database";

    storageRef.getDownloadURL().then(function(url) {
        imageRef.child("image").set(url);
    }); 

    var task = storageRef.putString("Your base64 string substring variable", 'base64').then(function(snapshot) {
         console.log('Uploaded a base64 string!');
         });

Answer 2

, , putString(message, 'base64') data:image/jpeg;base64,.

Base64url putString(message, 'base64url') . , . putString(message, 'base64'). , !