将生成的PNG图像放入JSZip中

Question

我正在使用JSZip编写一个程序，该程序从canvas元素生成图像数据并将其放入zip文件中。

目前，它将画布图像转换为DataURL。然后，我删除结果字符串中说的data:image/png;base64,部分。现在，只剩下base64数据。然后，我使用atob将其转换为ASCII码。

看起来将剩余的字符串放入图像文件应该可以工作，但生成的ASCII文本不正确。其中许多部分是正确的，但有些地方不对。

以下是我的代码：

//screen is the name of the canvas.
var imgData = screen.toDataURL();
imgData = imgData.substr(22);
imgData = atob(imgData);
console.log(imgData);

这是生成的PNG文件的图像（在记事本中）： 不正确的文本 http://upurs.us/image/71280.png 这是应该看起来像什么： 正确的文本 http://upurs.us/image/71281.png 如您所见，存在轻微差异，我不知道为什么。我对PNG文件类型或ASCII一无所知，因此不知道该从何处入手。

如果您想查看我的所有工作，请参阅项目： http://s000.tinyupload.com/download.php?file_id=09682586927694868772&t=0968258692769486877226111 编辑：我的最终目标是拥有一个程序，可以导出画布动画的每个帧，以便我可以使用它们制作视频。如果有人知道这样的程序，请发布！

- Polygon

---

查找一个 dataURLtoBlob 函数，将 Blob 保存在 JSZip 中而不是“二进制字符串”。 - dandavis

谢谢 @dandavis ，但我完全不知道 blobs 或 ajax 如何工作（我认为您需要使用 ajax 来使用 blobs，但我不知道）。您有任何可以教我如何使用它们的网站建议吗？在谷歌上查找教程并没有帮助到我。 - Polygon

Answer 1

当你使用zip.file("hello.png", imgData)，其中imgData是一个字符串时，你告诉JSZip保存一个（unicode）字符串。由于它不是文本内容，因此你会得到一个损坏的内容。要解决这个问题，你可以这样做：

zip.file("hello.png", imgData, {binary: true})

就像dandavis提到的，这里使用blob将更加高效。您可以使用canvas.toBlob将画布转换为blob：

screen.toBlob(function (blob) {
  zip.file("hello.png", blob);
});

唯一的注意事项是toBlob是异步的：在此期间应禁用下载按钮（否则，如果用户足够快或浏览器足够慢，则zip.file 将不会被执行，您将向用户提供空的zip文件）。

document.getElementById("download_button").disabled = true;
screen.toBlob(function (blob) {
  zip.file("hello.png", blob);
  document.getElementById("download_button").disabled = false;
});

- David Duponchel