如何將畫布作為圖像保存到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;
    });
}

但是，當我運行Web應用程序時，控制台顯示錯誤：

FirebaseError：Firebase存儲：索引0處的put中的參數無效：預期的Blob或文件。

如何將畫布成功保存到Firebase存儲？

Answer 1

是的，這是可能的。 您遇到的問題是您正在嘗試上傳dataUrl，但firebase的put函數除了blob或文件之外。 要將畫布轉換為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); to var uploadTask = storageRef.child('images/' + "apple").put(blob);

當我嘗試它時，也不確定這是否適用於你的情況我得到了一個污點畫布錯誤。

什么對我有用的是這個問題的答案如何在javascript中將dataURL轉換為文件對象？