Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Crazy JavaScript hack: unzipping a file

DZone's Guide to

Crazy JavaScript hack: unzipping a file

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

Handling binary data is slowly getting better in JavaScript, but in most browsers, people still have to resort to amazingly clever hacks when it comes to things like unzipping a file stored on a server. Here are the steps that are involved (slide 38). I suspect that you will never need to do this, but it is still fun to see what is possible.

  • Read the binary data of the ZIP file from the server via XMLHttpRequest. You need to specify a charset x-user-defined to ensure that each byte stays a single character.
  • Translate the binary data to base 64 and turn it into a PNG data URI. PNG is zipped internally, so if you get the header right, the web browser will unzip the data as soon as the image is drawn somewhere.
  • Draw the image into a Canvas object, with a height of 1 pixel. Read the uncompressed data from the Canvas, pixel by pixel.

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}