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.
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.
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); demo.buildMosaic(image_file_name);
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
22 Replies to “Ajax mosaic builder”
amazing, thanks for sharing that
Hi…Man i love reading your blog, interesting posts ! it was a great Sunday .
you have a nice work here friends