javascript - How can I save canvas as image to Firebase storage? - Stack Overflow

admin管理员组

文章数量:1289581

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 plete
        // For instance, get the download URL: /...
        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?

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 plete
        // For instance, get the download URL: https://firebasestorage.googleapis./...
        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?

• javascript
• firebase
• html5-canvas
• storage
• firebase-storage

Share Improve this question Follow edited Jul 5, 2016 at 19:43 Heretic Monkey 12.1k77 gold badges6161 silver badges131131 bronze badges asked Jun 17, 2016 at 5:32 pavitranpavitran 81411 gold badge1010 silver badges2525 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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?

本文标签： javascriptHow can I save canvas as image to Firebase storageStack Overflow