I'm trying to save canvas as an image to the firebase storage. I have read many articles and questions about saving canvas to server, and tried to implement the same with the below code.
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;
});
}
But when I run the web app, the console shows error:
FirebaseError: Firebase Storage: Invalid argument in
put
at index 0: Expected Blob or File.
How can I successfully save a canvas to Firebase storage?
Uploading Image to the Firebase Storage using Cloud functions from NodeJS Environment. If you are familiar with firebase, you will agree that file upload is usually done on the client-side using the Firebase SDK. You first upload files to firebase storage, download the URL and send it to the Firestore.
If you are familiar with firebase, you will agree that file upload is usually done on the client-side using the Firebase SDK. You first upload files to firebase storage, download the URL and send it to the Firestore.
If the network connection is poor, the client is able to retry the operation right where it left off, saving your users time and bandwidth. Cloud Storage for Firebase stores your files in a Google Cloud Storage bucket, making them accessible through both Firebase and Google Cloud.
Add File Metadata Cloud Storage for Firebase allows you to quickly and easily upload files to a Cloud Storage bucket provided and managed by Firebase. Note: By default, a Cloud Storage bucket requires Firebase Authentication to perform any action on the bucket's data or files.
Yes this is possible. The problem you are having is that you are trying to upload a dataUrl but firebase's put function only excepts blobs or files. To convert a canvas to a blob use the toBlob
function.
canvas.toBlob(function(blob){
var image = new Image();
image.src = blob;
var uploadTask = storageRef.child('images/' + "apple").put(blob);
});
Edit: changed var uploadTask = storageRef.child('images/' + "apple").put(image);
to var uploadTask = storageRef.child('images/' + "apple").put(blob);
Also not sure if this will work in your case when i tried it I got a tainted canvas error.
What worked for me was the answer to this question How to convert dataURL to file object in javascript?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With