如何将画布作为图像保存到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存储:put索引0处的参数无效:预期的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);为var uploadTask = storageRef.child('images/' + "apple").put(blob);

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

什么对我有用的是这个问题的答案如何在javascript中将dataURL转换为文件对象？