我使用JSZip制作一个程序,从canvas元素生成图像数据,并将图像放入zip文件.

现在,它正在将画布图像转换为DataURL.然后,我摆脱了结果字符串中表示数据的部分：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

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

解决方法:

当你使用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;
});