Convert image file to html page using div blocks
Alec Jacobson
October 12, 2009
This is the revival of an old program I was requested to make. Given any .png, .jpg, .jpeg, .bmp, image file, DivMachine converts that image into a collection of colored divs. So given this image (8 KB):
DivMachine produces (164 KB):
<style type="text/css">
div.dm {
position:absolute;
}
</style>
<div style="position: relative;padding:20px;background-color:#c3e0f0;width:100px;height:126px;">
<div class='dm' style="top:0px; left:58px; background-color:#2F2F31; width:1px; height:1px"></div>
<div class='dm' style="top:0px; left:56px; background-color:#2D2720; width:2px; height:2px"></div>
<div class='dm' style="top:1px; left:58px; background-color:#251C13; width:1px; height:1px"></div>
<div class='dm' style="top:0px; left:59px; background-color:#26292D; width:1px; height:2px"></div>
<div class='dm' style="top:2px; left:57px; background-color:#513E21; width:3px; height:1px"></div>
<div class='dm' style="top:0px; left:60px; background-color:#25292C; width:1px; height:3px"></div>
...
which displayed as html looks like this:
The source is included in the zip file.