एक ज़िप में कैनवास से एक छवि सहेजना

Question

मेरे पास HTML5 में कैनवास है जो बहुत लंबे डेटाURL (अंत में क्रोम को क्रैश करने के लिए पर्याप्त है, अगर वे इसे नेविगेट करने का प्रयास करते हैं) को समाप्त कर सकते हैं। इसके कारण, मैं JSZip का उपयोग कर छवि को ज़िप में सहेजने की कोशिश कर रहा हूं।

Uncaught TypeError: Object #<HTMLImageElement> has no method 'replace' 

मैं भी इस की कोशिश की:

var zip = new JSZip(); 
var savable = new Image(); 
savable.src = canvas.toDataURL(); 
zip.file("image.png", savable, {base64: true}); 
var content = zip.generate(); 
var blobLink = document.getElementById('blob'); 
blobLink.download = "image.zip"; 
blobLink.href = window.URL.createObjectURL(zip.generate({type:"blob"})); 

यह निम्न त्रुटि का कारण बनता है: मैं निम्नलिखित दो बातें की कोशिश की है

var zip = new JSZip(); 
zip.file("image.png", canvas.toDataURL(), {base64: true}); 
var content = zip.generate(); 
var blobLink = document.getElementById('blob'); 
blobLink.download = "image.zip"; 
blobLink.href = window.URL.createObjectURL(zip.generate({type:"blob"})); 

काम करने के लिए प्रकट होता है कि है, लेकिन फिर छवि ज़िप में मान्य नहीं है। छवि को सही तरीके से सहेजने के लिए मैं क्या कर सकता हूं?

Answer 1

आप वास्तविक बेस 64 डेटा data:[<MIME-type>][;charset=<encoding>][;base64],<data> से पहले एक डेटा यूरी उत्पन्न कर रहे हैं, जिसमें स्कीमा, माइम-टाइप आदि है। डेटा का उपयोग करने से पहले आपको सभी सामग्री को हटाना होगा।

zip.file("image.png", savable.src.substr(savable.src.indexOf(',')+1), {base64: true});