Javascript 如何将画布另存为图像到Firebase存储？

我正在尝试将画布作为图像保存到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应用程序时，控制台显示错误：

Firebase错误：Firebase存储：索引0处的

put

中的参数无效：应为Blob或文件

---

如何将画布成功保存到Firebase存储？

是，这是可能的。您遇到的问题是，您试图上载一个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）

也不确定这是否适用于你的情况，当我尝试它时，我得到了一个受污染的画布错误

对我有效的是这个问题的答案
我尝试了你的解决方案，但现在我得到了两个错误
Firebase存储：索引0的put中的参数无效：预期的Blob或文件。
和
http://localhost:11080/[对象%20Blob]404（未找到）
错误DOMEException:未能对“HTMLCanvasElement”执行“toBlob”：可能无法导出受污染的画布。
的me@Emerica使用image.setAttribute（'crossorigin'，'anonymous'）；