int2binary2html


This tool allows to transform a JS array of integers (between 0 and 255) in binary:



Integers

Binary

download binary file ( bytes)


This binary code can be packed inside a HTML file and the integers can be retrieved with JavaScript,
via one of these 3 different approaches (wink wink Js13kGames):



1) Self-XHR

The binary code is placed at the end of the HTML file and retrieved using XHR.

Upsides:
- All ints take 1 byte (no need to escape certain chars).
- The binary payload is invisible in the page (placed inside a hidden xmp tag).
- Lighter than putting your binary code in a separate file.

Downsides:
- Doesn't work with file:// protocol.
- UTF-8 BOM (or meta tag) is not included. You'll need to add it if you want to display non-latin chars or emoji.

download HTML file ( bytes)


2) Latin-1 string

The binary code is escaped and placed in a JS string.

The trick is that the HTML file is encoded in Latin-1, so every char between 0 and 255 is encoded on 1 byte (contrary to UTF-8, where every char after U+007F is encoded on 2 bytes).

Upsides:
- Decoder is 38 bytes shorter than self-XHR.
- Browsers parse HTML files in Latin-1 by default, so no need to declare a charset or use a BOM.
- No XHR (works with file:// protocol).
- No weird NULL characters to handle.

Downsides:
- Some Latin-1 chars are not the same as Unicode's code points 00 to FF, so they must be converted (see code below).
- The chars "\", "\r" and "`" must be escaped inside the string, so in the long run it may get bigger than self-XHR.
- The HTML file encoded in Latin-1 can't include non-latin or emoji (but their HTML entities are okay).
- Take care to keep the file encoded in Latin-1 (a.k.a iso-8859-1 a.k.a ANSI) when you edit it!

download HTML file ( bytes)


3) Base64

The binary code is encoded in base64 and placed in a JS string.

Upsides:
- Super light decoder.
- 100% ASCII.
- Base64 gzips well (almost as well as raw binary).

Downsides:
- Gzip performance depends on your data, you have to check if it saves bytes compared to self-XHR.

download HTML file ( bytes)


Choose one file, replace the console.log with your JS code and have fun!