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.

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.

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.

Here is my code:

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

Here is an image of the resulting png file (in notepad): incorrect text .png

And here is what is should look like: correct text .png

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.

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

EDIT: 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!

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.

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.

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.

Here is my code:

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

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

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

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.

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

EDIT: 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!

• javascript
• base64
• png
• ascii
• jszip

Share Improve this question Follow asked May 31, 2016 at 23:58 PolygonPolygon 26511 gold badge22 silver badges1313 bronze badges 2

• 1 find a dataURLtoBlob function, save blob in jszip instead of a "binary string" – dandavis Commented Jun 1, 2016 at 0:33
• @dandavis Thanks, but I have absolutely no knowledge of how blobs or ajax work (I think you need to use ajax to use blobs, but I have no idea). Do you have any suggestions for websites that could teach me how to use them? Googling tutorials hasn't gotten me anywhere. – Polygon Commented Jun 1, 2016 at 1:10

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

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

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

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