Aplicar efecto Canvas

[ryugen]

Puedes ver aquí un ejemplo de lo que quieres funcionando:

http://jsfiddle.net/37BUa/6/

De todas formas coincido bastante con el pensamiento de furoya.

Porque en todas tus respuesta pareciera como si no te hubieses puesto a pensar que es lo que necesitabas y al contrario lo solicitabas hecho.

Que hace el código (utiliza jQuery para simplificar) ?

Código Javascript:

(function() {
(function() {
 var supportsCanvas = !!document.createElement('canvas').getContext;
 
 function greyImages(cva,img) {
    
    var ctx =cva.getContext('2d');
    var imageData, px, length, i = 0,
    red, green, blue, grey;
 
    ctx.drawImage(img, 0, 0);
 
    imageData = ctx.getImageData(0, 0, cva.width, cva.height);
    px = imageData.data;
    length = px.length;
 
    for ( ; i < length; i+= 4 ) {
       // rgba
       grey = 0.3*px[i] + 0.59*px[i+1] + 0.11*px[i+2];
       px[i] = px[i+1] = px[i+2] = grey;
    }
 
    ctx.putImageData(imageData, 0, 0);
 }
    $(document).ready(function(){
        $('.icono').each(function(){
            var _this = $(this);
            var _canvas = $(document.createElement('canvas'));
            _canvas.width(_this.width());
            _canvas.height(_this.height());
            _canvas.attr('width',_this.width());
            _canvas.attr('height',_this.height());
            _canvas.css('top',_this.position().top);
            _canvas.css('left',_this.position().left);
            _this.after(_canvas);
            greyImages(_canvas.get(0),_this.get(0));            
        });            
    });
})();
 

Pues:
1) Para cada imagen crea un canvas (con el ancho y alto del canvas)
2) Copia la imagen en el contexto del canvas
3) Posiciona de manera absoluta el canvas sobre la imagen
4) Por cada pixel del canvas lo reemplaza por su correspondiente en grises

Para llegar al código antes de hacerlo pensé en este plan y luego lo implementé

Saludos