Ajax mosaic builder

To demonsterate what you can do with the BinFileReader that I have posted at http://nagoon97.wordpress.com/2008/04/06/reading-binary-files-using-ajax/, I’ve written a mosaic builder.

Mosaic picture of Hillary Duff built with 23 images

The function will load multiple images as a color pallet using BinFileReader and then arranged them in such an order that those images would look like one of the images in the pallet.

And you can also click on one of the small images to rearrange the images to build that image.

The demo is available at http://www.heypage.com/nagoon97/BinFileReader/MosaicBuilder_demo.html

It may take a while to load all the image files because the hosting server is quote slow, please be patient.

You can see the image loading progress on the title bar on FireFox but I found that IE won’t even update the title bar before making an ajax request.

And I’d like to mention that this was written entirely in Javascript/VBScript, no server-side techologies what-so-ever. (VBScript for IE support)

To try this on your own server, you just need to download BinFileReader.js, MosaicBuilder.js, the HTML file and the image files.

And you can use the mosaic builder in the following manner.

var demo = MosaicBuilder(Prefix_used_for_the_filenames_of_the_images, number_of_the_image_files);



var demo = new MosaicBuilder("60x45", 23);
demo.buildMosaic("60x45 (0).bmp");

Please note that since the function was written just to show what can done with BinFileReader, the code was not optimized.
If you wish to increase the speed, you may want to sort the pallet and then implement a better search algorithm when it looks for an image with the closest brightness.

And if you wish to run this script with your own set of images, please make sure all the images are
(1) 24 bits per pixel, uncompressed BMP files
(2) gray scaled
(3) small

Reading binary files using Ajax

A growing number of web applications are making more and more use of client-side technologies because thanks to Ajax, it is now possible to write more fluid and more responsive web applications using only client-side technologies.

Now, web developers from all around the globe are releasing really interesting utilities and applications using only client-side technologies, many of which used to be within the domain of server-side technologies.

But when it comes to binary files, helping hands from server-side technologies are often necessary.

So I googled around to see what I can do about binary files with Ajax and found this Marcus Granado’s post at http://mgran.blogspot.com/2006/08/downloading-binary-streams-with.html

What he posted there worked like a charm for FireFox and Safari but I couldn’t get it to work for IE.

But luckily, within the same page, someone had posted up a solution for IE as a comment, which is written in VBScript.

So I put them all together in this BinFileReader function, which provides cross-browser support and helper methods to easily access the binary contents.


* BinFileReader: http://www.heypage.com/nagoon97/BinFileReader/BinFileReader.js

getFileSize() Return the file size
getFilePointer() Return the reading position
movePointerTo(iTo) Move the reading position to iTo.
movePointer(iDirection) Move the reading position in iDirection.
For all the following read functions,
– The reading position will move to the end of where the content is last read
– When iFrom is ommited, current reading position is used
readNumber(iNumBytes, iFrom) Read and return iNumBytes-byte number starting at iFrom.
readString(iNumChars, iFrom) Read and return iNumChars characters starting at iFrom.
readUnicodeString(iNumChars, iFrom) Read and return iNumChars unicoded characters starting at iFrom.


* Example:
var bmpFile = new BinFileReader(“image.bmp”);
var width = bmpFile.readNumber(4);
var height = bmpFile.readNumber(4);

* Demo:



* Related Posts