1. The NodeBox code
Few requirements to follow along, the main one is installing NodeBox.
Nodebox is a Mac OS X application for visual generation using python.
You can download NodeBox here.
Create a new file with NodeBox and paste in the below code. The code is expecting an images folder at the same level as your NodeBox file. You should have your target image in that folder. "targetfile" references the image you want to pull in and the code is set to expect ajpg, all of this can be changed to your suiting.
#a lot of the below relating to canvas and pixels is taken from the NodeBox Coreimage lib page
#learn about coreimage here http://nodebox.net/code/index.php/Core_Image
coreimage = ximport("coreimage")
# target image filename
#string for filename of outputted css and js files
#good to use a different var here as you can leave the image source the same but change the blocksize and render different css files for different versions
#set size of grid division,
#this also defines then the width, height of the divs that render the blocks of colors
#the smaller this int is the more color blocks will be recorded and reverse is true
#define the start of the css string we will create
#loop through the grid thats based on blocksize
for x,y in grid(w/blocksize, h/blocksize, blocksize, blocksize):
#get r value from Color object, multiply by 100 to get it iinto correct value for css
#split r at '.' to get proper value for css
#do same for g and b values from Color object
#add a class def for every color value to the css string we are building
#draw rect at given x,y with fill set above
rect(x,y, blocksize, blocksize)
#good idea to watch what the total count is here
#the lower blocksize val you use the higher this count
#obviously the css etc can start to become unwieldly
print ('count is',count)
#writing the string for the js file we will include on the page.
#setting the int for the point in the js loop we want the div to clear:left
#also setting the total number of blocks
js="var countbreak="+ str(WIDTH/blocksize)+"; var blockcount="+str(count)+";"
#write the css file
#write the js file
2. Include the generated css and js files in your page (+jQuery).
Minify your css they can be large...
<link href="boba-fett.css" type="text/css" rel="stylesheet" >
<script src="boba-fett.js" ></script>
3. Function in page for rendering color blocks
Remember you'll need to have jQuery included in your page before you can call this
$(".portrait").append('<div class="b'+i+' '+ tclass + ' block"></div>');