12

キャンバスを画像として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:putインデックス 0 の引数が無効です: Blob または File が必要です。

キャンバスを Firebase ストレージに正常に保存するにはどうすればよいですか?

4

1 に答える 1

9

はい、これは可能です。あなたが抱えている問題は、dataUrl をアップロードしようとしているが、firebase の 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(image);変更var uploadTask = storageRef.child('images/' + "apple").put(blob);

また、私が試したときにこれがあなたのケースで機能するかどうかもわかりません.汚染されたキャンバスエラーが発生しました.

私にとってうまくいったのは、この質問に対する答えでした。javascriptでdataURLをファイルオブジェクトに変換する方法は?

于 2016-07-05T16:53:03.610 に答える