将生成的PNG图像放入JSZip [英] Put generated PNG image into JSZip

问题描述

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

I am using JSZip to make a program that generates the image data from a canvas element and puts the image into a zip file.

现在，它正在将画布图像转换为DataURL。然后，我删除了结果字符串中显示 data：image / png; base64，的部分。现在，除了base64数据之外什么都没有。然后我使用 atob 将其更改为ascii。

Right now, it is turning the canvas image into an DataURL. Then, I get rid of the part of the resulting string that says data:image/png;base64,. Now, there is nothing left but the base64 data. I then use atob to change it to ascii.

似乎将剩余的字符串放入图像文件中应该工作，但生成的ascii文本不正确。它的很多部分都是正确的，但有些不对。

It seems like putting the remaining string into an image file should work, but the generated ascii text is not correct. Many parts of it are correct, but something is not right.

这是我的代码：

//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

Here is an image of the resulting png file (in notepad): incorrect text http://upurs.us/image/71280.png

以下是应该看起来的样子：
正确的文字http： //upurs.us/image/71281.png

And here is what is should look like: correct text http://upurs.us/image/71281.png

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

As you can see, there are slight differences, and I have no idea why. I know absolutely nothing about the PNG file type or ASCII, so I don't know where to go from here.

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

If you want to see all my work, here's the project: http://s000.tinyupload.com/download.php?file_id=09682586927694868772&t=0968258692769486877226111

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

My end goal is to have a program that exports every single frame of a canvas animation so that I can use them to make a video. If anyone knows a program that does that, please post it!

推荐答案

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

When you use zip.file("hello.png", imgData) where imgData is a string, you tell JSZip to save an (unicode) string. Since it's not a textual content, you get a corrupted content. To fix that, you can do:

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

正如dandavis建议的那样，使用blob会更有效率。您可以使用 canvas.toBlob ：

As dandavis suggested, using a blob will be more efficient here. You can convert a canvas to a blob with canvas.toBlob:

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

唯一需要注意的是 toBlob 是异步的：您应该在此期间禁用下载按钮（否则，如果用户足够快或浏览器速度足够慢， zip.file 将不会执行，您将给你的用户一个空的zip。）

The only caveat is that toBlob is asynchronous: you should disable the download button during that time (or else, if a user is quick enough or the browser slow enough, zip.file won't be executed and you will give an empty zip to your user).

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

这篇关于将生成的PNG图像放入JSZip的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！