Wie kann ich Canvas als Bild im Firebase-Speicher speichern?

Question

Ich versuche Leinwand als Bild der Feuerbasis Speicherplatz zu sparen. Ich habe viele Artikel und Fragen zum Speichern von Canvas auf dem Server gelesen und versucht, dasselbe mit dem folgenden Code zu implementieren.

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; 
    }); 
} 

Aber wenn ich die Web-App ausführen, wird die Konsole zeigt Fehler:

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

Wie kann ich eine Leinwand auf Firebase Speicher erfolgreich retten?

Answer 1

Ja, das ist möglich. Das Problem, das Sie haben, ist, dass Sie versuchen, ein DataUrl hochzuladen, aber die Put-Funktion von Firebase nur Blobs oder Dateien ausschließt. Verwenden Sie die toBlob-Funktion, um eine Leinwand in ein Blob zu konvertieren.

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

Edit: geändert var uploadTask = storageRef.child('images/' + "apple").put(image); zu var uploadTask = storageRef.child('images/' + "apple").put(blob);

auch nicht sicher, ob dies in Ihrem Fall arbeiten, wenn ich es versuchte, bekam ich einen verdorbenen Leinwand Fehler.

Was für mich gearbeitet, war die Antwort auf diese Frage How to convert dataURL to file object in javascript?