Desenfoque de imagen con CSS/Javascript: ¿es posible?

Question

¿Es posible agregar un efecto de desenfoque a una imagen usando CSS y Javascript?

Answer 1

Sí, this works a treat:

Pixastic es una biblioteca experimental que permite llevar a cabo una variedad de operaciones de imágenes utilizando sólo un poco de JavaScript. Los efectos admitidos incluyen: desaturación/escala de grises, inversión, inversión, ajuste de brillo/contraste, tonalidad/saturación, relieve, desenfoque y muchos más ...

Pixastic funciona utilizando el elemento HTML5 Canvas que proporciona acceso a los datos en bruto de píxeles, abriéndose para efectos de imagen más avanzados. Aquí es donde entra en juego la parte "experimental". Canvas solo es compatible con algunos navegadores y desafortunadamente Internet Explorer no es uno de ellos. Sin embargo, está bien soportado tanto en Firefox como en Opera, y el soporte para Safari recién llegó con el reciente lanzamiento de Safari 4 (beta). Chrome actualmente funciona en el canal dev. Algunos de los efectos se han simulado en IE utilizando los antiguos filtros propietarios. Si bien estos filtros son mucho más rápidos que sus amigos de Canvas, son pocos y limitados. Espero que un día tendremos lienzo real en IE, así ...

Answer 2

otra posibilidad es utilizar StackBlur o Superfast Blur

Answer 3

Esto también es bueno tener en cuenta:

http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/

http://tympanus.net/codrops/2011/11/18/fullscreen-image-blur-effect-with-html5/

Answer 4

Con CSS3 podemos ajustar fácilmente una imagen. Pero recuerda que esto no cambia la imagen. Solo muestra la imagen ajustada. Para Chrome

Ver demostración en vivo y el código fuente completo aquí

http://purpledesign.in/blog/adjust-an-image-using-css3-html5/

Ver el siguiente código para más detalles.

Haciendo gris imagen:

img { 
-webkit-filter: grayscale(100%); 
} 

para dar un aspecto de la sepia:

img { 
-webkit-filter: sepia(100%); 
} 

para ajustar el brillo:

img { 
-webkit-filter: brightness(50%); 
} 

Para ajustar el contraste:

img { 
-webkit-filter: contrast(200%); 
} 

Para desenfocar una imagen: trabaja

img { 
-webkit-filter: blur(10px); 
} 

Answer 5

StackBlur: Así es como yo lo estoy usando: también, funciona en todos los navegadores y ipad !! a diferencia de webkit !!

descarga StackBlur v5.0 de aquí: StackBlurv5.0

HTML

<CANVAS ID="top"></CANVAS> 
<SCRIPT TYPE="text/javascript" SRC="js/StackBlur.js"></SCRIPT> 

CSS

#top {      
    border-radius:   28%; 
    -o-border-radius:  28%; 
    -webkit-border-radius: 28%; 
    -moz-border-radius: 28%; 
    position: absolute; 
    top: -2px; 
    left: -2px; 
    z-index: 40; 
    width: 208px; 
    height: 208px; 
} 

JS

var topCan = document.getElementById("top"); 
var toptx = topCan.getContext("2d"); 
toptx.drawImage(_specimenImage, 0, 0); 
var blur = 0; 

blur  = Math.abs(_sliderF.getPosition(8, -8)); //this returns multiple values 
                //based on a new slider position 

stackBlurCanvasRGB("top", 0, 0, topCan.width, topCan.height, blur); 

NOTAS: Los valores de radio para la función stackBlurCanvasRGB puede variar de pienso 100 a - 100 .. solo juega con valores, lo pondrás en funcionamiento. ..CanvasRGB funciona más rápido que CanvasRGBA en iPad ... al menos eso es lo que estoy notando en iPad 4ta generación.

Answer 6

El uso de CSS

.cbp-rfgrid li:hover img { 
-webkit-filter: blur(2px); 
-moz-filter: blur(2px); 
filter: blur(2px); 
}