如何将 canvas 作为图像保存到 Firebase 存储？

Question

我正在尝试将 canvas 作为图像保存到 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;
    });
}

但是当我运行网络应用程序时，控制台显示错误：

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

如何才能将 canvas 成功保存到 Firebase 存储？

Answer 1

是的，这是可能的。您遇到的问题是您正在尝试上传 dataUrl，但 firebase 的 put 函数仅排除 blob 或文件。要将 canvas 转换为 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);

也不确定这是否适用于您的情况，当我尝试它时我遇到了一个受污染的 canvas 错误。

对我有用的是这个问题的答案How to convert dataURL to file object in javascript?

如何将 canvas 作为图像保存到 Firebase 存储？

How can I save canvas as image to Firebase storage?

javascript

firebase

html5-canvas

storage

firebase-storage