从zip中以画布保存图像

Question

我在HTML5中有一个画布,最终可能会成为一个非常长的dataURL(如果他们尝试导航到chrome,则足以崩溃).因此,我正在尝试使用JSZip将图像保存为zip.我尝试了以下两件事:

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

这会导致以下错误:

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

我也试过这个:

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

这似乎有效,但是zip中的图像无效.我该怎么做才能正确保存图像？

Answer 1

你正在生成一个数据uri,它在实际的base64数据之前有schema,mime-type等data:[<MIME-type>][;charset=<encoding>][;base64],<data>.您必须在数据之前删除所有内容然后使用它.

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