javascript - 将画布中的图像保存为 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 数据之前具有架构、mime-type 等data:[<MIME-type>][;charset=<encoding>][;base64],<data>。您必须先删除所有内容，然后再使用数据。

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