Come posso salvare un quadro come immagine nella memoria di Firebase?

Question

Sto provando a salvare la tela come immagine nella memoria di Firebase. Ho letto molti articoli e domande sul salvataggio del canvas sul server, e ho cercato di implementare lo stesso con il codice seguente.

function server(){ 
    canvas = document.getElementById("c"); 
    var storageRef = firebase.storage().ref(); 
    var mountainsRef = storageRef.child('mountains.jpg'); 
    var image = new Image(); 
    image.src = canvas.toDataURL("image/png"); 
    var uploadTask = storageRef.child('images/' + "apple").put(image); 
    uploadTask.on('state_changed', function(snapshot){ 
     // Observe state change events such as progress, pause, and resume 
     // See below for more detail 
    }, function(error) { 
     // Handle unsuccessful uploads 
    }, function() { 
     // Handle successful uploads on complete 
     // For instance, get the download URL: https://firebasestorage.googleapis.com/... 
     var downloadURL = uploadTask.snapshot.downloadURL; 
    }); 
} 

Ma quando faccio funzionare l'applicazione Web, la console mostra errore:

FirebaseError: Firebase Storage: Invalid argument in put at index 0: Expected Blob or File.

Come posso risparmiare con successo una tela di stoccaggio Firebase?

Answer 1

Sì, questo è possibile. Il problema che si sta verificando è che si sta tentando di caricare un dataUrl, ma la funzione put di Firebase esclude solo blob o file. Per convertire una tela in un blob utilizzare la funzione toBlob.

canvas.toBlob(function(blob){ 
    var image = new Image(); 
    image.src = blob; 
    var uploadTask = storageRef.child('images/' + "apple").put(blob); 
}); 

Edit: cambiato var uploadTask = storageRef.child('images/' + "apple").put(image); per var uploadTask = storageRef.child('images/' + "apple").put(blob);

Inoltre non so se questo funzionerà nel tuo caso, quando ho provato ho ottenuto un errore di tela contaminato.

Quello che ha funzionato per me è stata la risposta a questa domanda How to convert dataURL to file object in javascript?