javascript - realtime - push firebase android

¿Cómo puedo guardar el lienzo como imagen en el almacenamiento de Firebase?

Question

Estoy intentando guardar el lienzo como una imagen en el almacenamiento de Firebase. He leído muchos artículos y preguntas sobre cómo guardar lienzo en el servidor, y traté de implementarlo con el código siguiente.

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

Pero cuando ejecuto la aplicación web, la consola muestra un error:

FirebaseError: almacenamiento de Firebase: argumento no válido en put en el índice 0: Blob o archivo esperado.

¿Cómo puedo guardar con éxito un lienzo en el almacenamiento de Firebase?

Answer 1

Sí, esto es posible. El problema que tienes es que estás tratando de subir un dataUrl pero la función de poner de firebase solo exceptúa blobs o archivos. Para convertir un lienzo en un blob, use la función toBlob .

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

Editar: cambiado var uploadTask = storageRef.child(''images/'' + "apple").put(image); para var uploadTask = storageRef.child(''images/'' + "apple").put(blob);

Además, no estoy seguro de si esto funcionará en su caso cuando lo intenté. Recibí un error de lienzo contaminado.

Lo que funcionó para mí fue la respuesta a esta pregunta ¿Cómo convertir dataURL a un objeto de archivo en javascript?