6

我正在使用JSZip制作一个程序，该程序从画布元素生成图像数据并将图像放入 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

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

4

1 回答 1

9

当你使用zip.file("hello.png", imgData)whereimgData是一个字符串时，你告诉 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;
});
于 2016-06-01T05:21:36.133 回答