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文件的图像（在记事本中）： incorrect text http://upurs.us/image/71280.png

以下是应该是这样的： correct text http://upurs.us/image/71281.png

正如您所看到的，存在细微差别，我不知道为什么。我对PNG文件类型或ASCII一无所知，所以我不知道从哪里开始。

如果你想看到我所有的工作，这是项目： http://s000.tinyupload.com/download.php?file_id=09682586927694868772&t=0968258692769486877226111

编辑：我的最终目标是有一个程序导出画布动画的每一帧，以便我可以使用它们制作视频。如果有人知道这样做的程序，请发布它！

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

将生成的PNG图像放入JSZip

1 个答案: