Skip to content

@tstone /imgtohtml.py
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Convert any PNG into a pure HTML representation (A grid of 1px by 1px tags)
#!/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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.