JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<script src="http://pixelgraphics.us/downloadify/js/swfobject.js"></script>
<script src="http://pixelgraphics.us/downloadify/js/downloadify.min.js"></script>
<div id="downloadify"></div>

CSS

body {
    position: absolute;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

JavaScript

var imageDataToICO = (function() {

	function littleEndianToHex(value, bytes) {
		// Convert value into little endian hex bytes
		// value - the number as a decimal integer (representing bytes)
		// bytes - the number of bytes that this value takes up in a string

		// Example:
		// littleEndianToHex(2835, 4)
		// > '\x13\x0b\x00\x00'

		var result = '';

		for (; bytes>0; bytes--) {
			result += String.fromCharCode(value & 255);
			value >>= 8;
		}

		return result;
	}

	return function(imageData) {
		var width = imageData.width,
			height = imageData.height,
			data = imageData.data;

		var num_data_bytes = data.length,             // size in bytes of BMP data
			num_bmp_bytes = 40 + num_data_bytes + 64, // full header size (offset) + size of data
			pixmap_height,
			pixmap_width,
			raw_1bit_bitmap = (new Array(width * height * 2 / 8 + 1)).join('\x00');

		pixmap_height = littleEndianToHex(height * 2, 4); // NOTE: my example .ico had 2x the Pixma height
		pixmap_width = littleEndianToHex(width, 4);
		num_data_bytes = littleEndianToHex(num_data_bytes, 4);
		num_bmp_bytes = littleEndianToHex(num_bmp_bytes, 4);

				// ==HEADER==
		var fileString =  '\x00\x00' +         // Reserved. Should always be 0.
				'\x01\x00' +         // Specifies image type: 1 for icon (.ICO) image, 2 for cursor (.CUR) image. Other values are invalid.
				'\x01\x00' +         // Specifies number of images in the file.

				// ==IMAGE==
				littleEndianToHex(width, 1) +             // **Specifies image width in pixels. Can be any number between 0 to 255. Special case: 0 means 256 pixels**
				littleEndianToHex(height, 1) +             // **Specifies image height in pixels. Can be any number between 0 to 255. Special case: 0 means 256 pixels**
				'\x00' +             // Specifies number of colors in the color palette. Should be 0 if the image is truecolor.
				'\x00' +             // Reserved. Should be 0.
				'\x01\x00' +         // In .ICO format: Specifies color planes. Should be 0...