Jak zapisać płótno jako obraz w magazynie Firebase?

Question

Próbuję zapisać płótno jako obraz w magazynie magazynu firebase. Czytałem wiele artykułów i pytań dotyczących zapisywania płótna na serwer i próbowałem zaimplementować to samo z poniższym kodem.

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

Ale kiedy uruchomić aplikację internetową, konsola pokazuje błąd:

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

Jak można z powodzeniem zapisać płótna Firebase przechowywania?

Answer 1

Tak, jest to możliwe. Problem polega na tym, że próbujesz przesłać funkcję dataUrl, ale funkcję umieszczania firebase, z wyjątkiem obiektów typu blob lub plików. Aby przekonwertować płótno na obiekt typu blob, należy użyć funkcji toBlob.

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

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

Również nie wiem, czy to będzie działać w przypadku, gdy próbowałem go mam skażoną błąd płótno.

Co pracował dla mnie była odpowiedź na to pytanie How to convert dataURL to file object in javascript?