Zapisywanie obrazu z płótna w jednym zip

Question

Mam płótno w HTML5, które może być bardzo długim dziennikiem danych (wystarczająco długim, aby zawiesić chrome, jeśli spróbuje się do niego nawigować). Z tego powodu próbuję zapisać obraz w suwaku za pomocą JSZip. Próbowałem dwa następujące rzeczy:

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

To powoduje następujący błąd:

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

Próbowałem też tak:

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

To wydaje się działać, ale wtedy obraz w suwaku jest nieważny. Co mogę zrobić, aby właściwie zapisać obraz?

Answer 1

Generujesz uri danych, które mają schemat, typ mime itp. Przed rzeczywistymi danymi base64 data:[<MIME-type>][;charset=<encoding>][;base64],<data>. Musisz usunąć całą zawartość przed danymi, a następnie z niej korzystać.

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