Speichern eines Bildes aus Canvas in einer Zip-Datei

Question

Ich habe eine Leinwand in HTML5, die am Ende eine sehr lange dataURL sein kann (lange genug, um Chrom zu crashen, wenn sie versuchen, dorthin zu navigieren). Aus diesem Grund versuche ich das Bild in einem Zip mit JSZip zu speichern. Ich habe die folgenden zwei Dinge versucht:

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

Dies verursacht den folgenden Fehler:

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

Ich habe auch versucht dies:

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

Das scheint zu funktionieren, aber dann wird das Bild in der zip ist nicht gültig. Was kann ich tun, um das Bild richtig zu speichern?

Answer 1

Sie generieren ein Daten-URI, das Schema, Mime-Typ usw. vor den eigentlichen Base64-Daten data:[<MIME-type>][;charset=<encoding>][;base64],<data> hat. Sie müssen den gesamten Inhalt entfernen, bevor Sie die Daten verwenden.

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