我在 HTML5 中有一个 Canvas ,它最终可能是一个非常长的数据 URL(如果他们尝试导航到它,它的长度足以使 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 中的图像无效。如何正确保存图像?
最佳答案
您正在生成一个数据 uri,它在实际的 base64 数据之前具有模式、mime 类型等 data:[<MIME-type>][;charset=<encoding>][;base64],<data>
.您必须先删除所有内容,然后再使用数据。
zip.file("image.png", savable.src.substr(savable.src.indexOf(',')+1), {base64: true});
关于javascript - 将 Canvas 中的图像保存在 zip 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15287393/