curtisblackwell/index.haml

## index.haml
%h1
	Any Image to CSS converter
.container
	.config
		%label Choose Image:
		%input#upload{:type=>"file"}
		%label PixelSize:
		%input#size{:type=>"number",:value=>"1"}
		%label Space:
		%input#space{:type=>"number",:value=>"0"}
		%label Alpha:
		%select#alpha
			%option{:value=>"yes"} Yes
			%option{:value=>"no"} No
		%label Pixel Roundess:
		%input#roundness{:type=>"number",:value=>"0"}
		.actions
			%button#convert Convert
		.css
			%textarea
	.results
		.pixelsCont
			.pixels

## script.js
$(function(){


	converter =   {
			image: "data:image/png;base64,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",
			pixels: $('.pixels'),
			space: 0,
			size: 1,
    	alpha: 'yes',
    	roundness: 0,
      toHex: function(num){
        var h = Math.round(num).toString(16);
    return h.length==0? '00': h.length==1? '0'+h : h;
      },
			run: function(){
				var img = new Image();
	    		img.src = this.image;
	    		var canvas = $('<canvas>')[0];
	    		var context = canvas.getContext('2d');
	    		context.drawImage(img, 0, 0);

	    		var shadow = [];
	    		for ( var i = 0; i < img.width; i++) {
	    			for ( var j = 0; j < img.height; j++) {
	    				var data = context.getImageData(i, j, 1, 1).data;
	    				var alpha = data[3]/255;
	    				alpha = Math.round(alpha*100)/100;
	    				var x = i+i*this.space;
	    				var y = j+j*this.space;
              if(this.alpha=='yes'){
	    					shadow.push( x+'px '+y+'px rgba('+data[0]+','+data[1]+','+data[2]+','+alpha+')' );
              }else{
                shadow.push( x+'px '+y+'px #'+this.toHex(data[0])+''+this.toHex(data[1])+''+this.toHex(data[2]) );
              }
	    			}
	    		}
	    		shadow = shadow.join(',');

	    		this.pixels
            		.css('border-radius',this.roundness+'px')
            		.css('width',this.size)
	    					.css('height',this.size)
	    					.css('box-shadow', shadow);
	    		$('.css textarea').val('.pixels{\n\
	border-radius: '+this.roundness+';\n\
	display: inline-block;\n\
	width: '+this.size+'px;\n\
	height: '+this.size+'px;\n\
	box-shadow: '+shadow+';\n\
}');
	    		return false;
			}
	};

	setTimeout(function(){converter.run()}, 200);

	// bind controls to converter object
	$('#upload').change(function(evt) {
		var files = evt.target.files;
		var f = files[0];
		var reader = new FileReader();
		reader.onload = (function(theFile) {
			return function(e) {
				converter.image = e.target.result;
				converter.run();
			};
		})(f);
	    reader.readAsDataURL(f);
	});
	$('#space').change(function(){converter.space = $(this).val();});
	$('#size').change(function(){converter.size = $(this).val();});
	$('#roundness').change(function(){converter.roundness = $(this).val();});
  $('#alpha').change(function(){converter.alpha = $(this).val();});
	$('#convert').click(function(){converter.run()});
});

## style.less
body{
	background: #fdfdfd;
	font: 12px arial;
}
h1{
	margin: 50px 20%;
	font: 20px arial;
	padding-bottom: 20px;
	border-bottom: 2px solid  #ddd;
}

.container{
	margin: 50px 20%;
}
.container .results{
	float: left;
	width: 50%;
}

.container .results .pixelsCont{
	margin: 0px 20px;
	height: 300px;
	border: 1px solid #eee;
	background: #f5f5f5;
	overflow: auto;
	padding : 10px;
}

.container .config{
	float: left;
	width: 50%;
}

.container .config label{
	display: inline-block;
	width: 50%;
}

.container .config input,.container .config select{
	width: 50%;
}
.container .config .actions{
	text-align: right;
}
.container .config button{
	padding: 5px 20px;
}

.container .config .css{
	width: 100%;
	height: 200px;
}
.container .config .css textarea{
	width: 100%;
	height:	100%;
	margin: 20px 0px;
}

.pixels{
	display: inline-block;
	width: 1px;
	height: 1px;
}
	%h1
	Any Image to CSS converter
	.container
	.config
	%label Choose Image:
	%input#upload{:type=>"file"}
	%label PixelSize:
	%input#size{:type=>"number",:value=>"1"}
	%label Space:
	%input#space{:type=>"number",:value=>"0"}
	%label Alpha:
	%select#alpha
	%option{:value=>"yes"} Yes
	%option{:value=>"no"} No
	%label Pixel Roundess:
	%input#roundness{:type=>"number",:value=>"0"}
	.actions
	%button#convert Convert
	.css
	%textarea
	.results
	.pixelsCont
	.pixels
	body{
	background: #fdfdfd;
	font: 12px arial;
	}
	h1{
	margin: 50px 20%;
	font: 20px arial;
	padding-bottom: 20px;
	border-bottom: 2px solid #ddd;
	}

	.container{
	margin: 50px 20%;
	}
	.container .results{
	float: left;
	width: 50%;
	}

	.container .results .pixelsCont{
	margin: 0px 20px;
	height: 300px;
	border: 1px solid #eee;
	background: #f5f5f5;
	overflow: auto;
	padding : 10px;
	}

	.container .config{
	float: left;
	width: 50%;
	}

	.container .config label{
	display: inline-block;
	width: 50%;
	}

	.container .config input,.container .config select{
	width: 50%;
	}
	.container .config .actions{
	text-align: right;
	}
	.container .config button{
	padding: 5px 20px;
	}

	.container .config .css{
	width: 100%;
	height: 200px;
	}
	.container .config .css textarea{
	width: 100%;
	height: 100%;
	margin: 20px 0px;
	}

	.pixels{
	display: inline-block;
	width: 1px;
	height: 1px;
	}