Convert any PNG into a pure HTML representation (A grid of 1px by 1px tags)

imgtohtml.py

#!/usr/bin/env python

#
# Converts any PNG into pure HTML
#

import png, array
reader = png.Reader(filename='wedding.png')   # << -- enter the image path here
width, height, pixels, metadata = reader.read()

r = 0
g = 0
h = 0
w = 0
h = 0
count = 0
building_color = ''
last_color = ''
carrying_width = 0
id = 0

html =  '<style type="text/css">\n'
html += '    div { overflow: hidden; background-color: white; }\n'
html += '    div > b { height: 1px; width: 110%; display: block; margin: 0; padding: 0; overflow: hidden; }\n'
html += '    div > b > a { height: 1px; width: 1px; display: block; float: left; background-color: #ffffff; margin: 0; padding: 0; }\n'
html += '</style>\n\n'
html += '<div style="position: relative; height: %spx; width: %spx;">\n' % (height, width)

for row in pixels:

    html += '<b>'

    for pixel in row:

        id += 1
        color = '%x' % pixel
        if len(color) == 1:
            color = '0%s' % color

        building_color += color
        count += 1

        if count == 3:
            count = 0
            carrying_width += 1

            # Convert to shorthand (if can)
            if building_color[0:1] == building_color[1:2] and building_color[2:3] == building_color[3:4] and building_color[4:5] == building_color[5:6]:
                building_color = '%s%s%s' % (building_color[0:1], building_color[2:3], building_color[4:5])

            if building_color != last_color:
                if len(last_color) > 0:
                    style = ''
                    if not last_color == 'fff' or not last_color == 'ffffff':
                        style += 'background:#%s;' % last_color
                    if carrying_width > 1:
                        style += 'width:%spx;' % str(carrying_width)

                    if len(style) > 0:
                        html += '<a style="%s"/>' % style
                    else:
                        html += '<a/>'

                carrying_width = 0

            last_color = building_color
            building_color = ''

    if len(last_color) > 0:
        carrying_width += 1
        html += '<a style="background:#%s;' % last_color
        if carrying_width > 1:
            html += 'width:%spx;' % str(carrying_width)
        html += '"/>'

    # Reset on each row
    carrying_width = 0
    last_color = ''
    html += "</b>"
    h += 1

html += '</div>'
print html