キャンバスをイメージとしてFirebaseストレージに保存するにはどうしたらいいですか？

Question

私はfirebaseストレージに画像としてキャンバスを保存しようとしています。キャンバスをサーバーに保存することに関する多くの記事や質問を読んで、以下のコードで同じように実装しようとしました。

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

しかし、私は、Webアプリケーションを実行すると、コンソールがエラーを示しています

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

どのように私は成功しFirebaseストレージにキャンバスを保存することができますか？

Answer 1

はい可能です。あなたが持っている問題は、あなたがdataUrlをアップロードしようとしているが、ファイアベースのput関数はブロブやファイルを除いてのみであるということです。キャンバスをblobに変換するには、toBlob関数を使用します。

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

編集：私は汚染されたキャンバスのエラーを得、それをしようとしたとき、これはあなたのケースで動作するかどうかわからない。またvar uploadTask = storageRef.child('images/' + "apple").put(blob);に

をvar uploadTask = storageRef.child('images/' + "apple").put(image);を変更しました。私の仕事は何

この質問How to convert dataURL to file object in javascript?