Convert image file to html page using div blocks

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):

div machine input image

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.

Tags: , , , ,

5 Responses to “Convert image file to html page using div blocks”

  1. Thank you very much! Really amazing tutorial!

  2. Eduardo says:

    how convert one div into image (jpg, png, etc)?

    thanks.

  3. Chris Peacock says:

    Absolutely brilliant, just what I was looking for. Well done!

  4. Lulu says:

    Thanks !!!
    It works fine

  5. dfps says:

    Is there any way to make the html images much, much smaller? I converted an image twice (once at full res), and they came out at 110mb and 50mb!

Leave a Reply