Over the holidays, I found myself with a couple weeks off, working on a perler bead project. I could not find the software I needed to convert a photo into a perler bead design, so I wrote one:
http://hikingdave.com/perlerDesign.htm
This page takes an image from your local system, scales it down to a reasonable size for a perler design, then converts each pixel to the closest possible bead color. It breaks the pixels into 29×29 panels, which are converted to PNG files, and displayed on the page. I offer a few options for the size of the final design, and the color balancing on the conversion.
The entire page works client-side, as a single HTML page. The image scaling is done by using an HTML5 canvas element, and scaling the canvas. I also grab the pixel data from the canvas when doing the color conversions, and then write the resulting pixel data directly to the src of an image tag to create the PNGs.
As this is my first time really experimenting with canvas, and I was more worried about functionality then the elegance of my code, I know it could be done better and cleaner. I also know that I need to change the color conversion to calculate based on HSV instead of RGB. I also want to offer more features later – cropping the image after it is selected is the #1 missing feature. I hope to go back and make those improvements later.
In any case, feel free to check it out.
