Как сохранить холст как изображение в хранилище Firebase?

Question

Я пытаюсь сохранить холст как изображение в хранилище firebase. Я прочитал много статей и вопросов о сохранении canvas на сервере и попытался реализовать то же самое с приведенным ниже кодом.

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

Но когда я запускаю веб-приложение, консоль показывает ошибку:

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

Как я могу успешно сохранить холст для хранения Firebase?

Answer 1

Да, это возможно. Проблема, с которой вы сталкиваетесь, заключается в том, что вы пытаетесь загрузить функцию dataUrl, но функцию putbase только за исключением блоков или файлов. Чтобы преобразовать холст в blob, используйте функцию toBlob.

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

Edit: изменен var uploadTask = storageRef.child('images/' + "apple").put(image); к var uploadTask = storageRef.child('images/' + "apple").put(blob);

Также не уверен, если это будет работать в вашем случае, когда я попробовал это я получил испорченную ошибку холста.

То, что сработало для меня ответ на этот вопрос How to convert dataURL to file object in javascript?