Làm cách nào để có thể lưu canvas dưới dạng hình ảnh vào bộ nhớ Firebase?

Question

Tôi đang cố gắng lưu canvas dưới dạng hình ảnh vào bộ nhớ firebase. Tôi đã đọc nhiều bài viết và câu hỏi về cách lưu canvas vào máy chủ và cố gắng triển khai cùng với mã bên dưới.

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; 
    }); 
} 

Nhưng khi tôi chạy các ứng dụng web, giao diện điều khiển cho thấy lỗi:

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

Làm thế nào tôi có thể tiết kiệm thành công một canvas để lưu trữ căn cứ hỏa lực?

Answer 1

Có điều này là có thể. Vấn đề bạn đang gặp phải là bạn đang cố gắng tải lên một dataUrl nhưng hàm đặt của firebase chỉ loại trừ các đốm màu hoặc các tệp. Để chuyển đổi canvas thành blob, hãy sử dụng hàm toBlob.

canvas.toBlob(function(blob){ 
    var image = new Image(); 
    image.src = blob; 
    var uploadTask = storageRef.child('images/' + "apple").put(blob); 
}); 

Chỉnh sửa: thay đổi var uploadTask = storageRef.child('images/' + "apple").put(image); để var uploadTask = storageRef.child('images/' + "apple").put(blob);

Cũng không chắc chắn nếu điều này sẽ làm việc trong trường hợp của bạn khi tôi đã cố gắng nó tôi nhận được một lỗi vải bẩn.

gì làm việc cho tôi là câu trả lời cho câu hỏi này How to convert dataURL to file object in javascript?