About   Contact

There's no application currently running here, but you can have the code! Truthfully this was designed for backend server purposes, but I didn't want to open a security hole. Thus, I'll be converting this to JavaScript, hopefully in the near future.

Requires Python 3+

from scipy import misc


def img_to_css(image):
    """Takes a jpg image file and ouputs this into a CSS box-shadow element

    Note: this is perhaps the _least ideal_ way to actually render an image in a webpage,
    as for a large image there will be a LOT of box-shadow element/pixel specifiers. Thus,
    do not use this on a large image, and consider this more curiousity than truly useful."""

    img = misc.imread(image)


    img = img.tolist()
    i,j = 0,0
    s = ''
    css_cnt = 1
    

    f = open('out.txt', 'w')

    # commence file writing
    f.write(".pixelimg {" + "\n" + "    " \
    + "background: #000;" + "\n" + "    " + "height: 1px;" + "\n" + "    " + "width: 1px;" + "   " + "box-shadow:")

    css_cnt = 1
    for line in img:
        css_cnt = 1
        j += 1
        for pxl in line:
            s = 'rgb' + '(' + str(pxl)[1:-1] + ')'
            f.write(str(css_cnt) + 'px' + ' ' + str(j) + 'px' + ' '+ s + ',' + '\n')
            css_cnt += 1
    f.write("}")
    
    f.close()

# function call
img_to_css('image.jpg')