मैं कैनवास को फायरबेस स्टोरेज में छवि के रूप में कैसे सहेज सकता हूं?

Question

मैं कैनवास को फायरबेस स्टोरेज में एक छवि के रूप में सहेजने की कोशिश कर रहा हूं। मैंने सर्वर पर कैनवास सहेजने के बारे में कई लेख और प्रश्न पढ़े हैं, और नीचे दिए गए कोड के साथ इसे लागू करने का प्रयास किया है।

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.

मैं कैसे सफलतापूर्वक Firebase भंडारण के लिए एक कैनवास बचा सकता है?

Answer 1

हां यह संभव है। आपके पास समस्या यह है कि आप डेटा यूआरएल अपलोड करने की कोशिश कर रहे हैं लेकिन फायरबेस के पॉट फ़ंक्शन केवल ब्लॉब्स या फ़ाइलों को छोड़ देता है। एक कैनवास को एक ब्लॉब में कनवर्ट करने के लिए 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(blob);

यह भी सुनिश्चित करें कि अगर यह आपके मामले में काम करेंगे जब मैं इसे करने की कोशिश मैं एक दागी कैनवास त्रुटि मिली नहीं करने के लिए var uploadTask = storageRef.child('images/' + "apple").put(image); बदल दिया है।

क्या मेरे लिए काम किया इस सवाल How to convert dataURL to file object in javascript?