code: function(src) {
  	var canvas = document.createElement('canvas'),
  		ctx = canvas.getContext('2d'),
  		imgObj = new Image();
  	
  	imgObj.src = src;
  	canvas.width = imgObj.width;
  	canvas.height = imgObj.height; 
  	
  	ctx.drawImage(imgObj, 0, 0); 
  	var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
  
  	for(var y = 0; y < imgPixels.height; y++){
  		for(var x = 0; x < imgPixels.width; x++){
  			var i = (y * 4) * imgPixels.width + x * 4;
  			var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
  			imgPixels.data[i] = avg; 
  			imgPixels.data[i + 1] = avg; 
  			imgPixels.data[i + 2] = avg;
  		}
  	}
  	
  	ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
  	return canvas.toDataURL();
  }
docs: Adapted from http://webdesignerwall.com/tutorials/html5-grayscale-image-hover