web-dev-qa-db-fra.com

Flou d'image avec CSS / Javascript: est-ce possible?

Est-il possible d'ajouter un effet de flou à une image en utilisant CSS et Javascript?

javascriptjqueryhtmlcssblur
21
Olivier Lalonde

Oui, cela fonctionne un régal :

Pixastic est une bibliothèque expérimentale qui vous permet d'effectuer une variété d'opérations sur des images en utilisant juste un peu de JavaScript. Les effets pris en charge par défaut incluent la désaturation/niveaux de gris, l'inversion, le retournement, le réglage de la luminosité/contraste, la teinte/saturation, le relief, le flou et bien d'autres ...

Pixastic fonctionne en utilisant l'élément HTML5 Canvas qui donne accès aux données de pixels brutes, ouvrant ainsi des effets d'image plus avancés. C'est là qu'entre en jeu la partie "expérimentale". Canvas n'est pris en charge que par certains navigateurs et, malheureusement, Internet Explorer n'en fait pas partie. Il est cependant bien pris en charge dans Firefox et Opera et la prise en charge de Safari viennent d'arriver avec la récente version de Safari 4 (bêta). Chrome fonctionne actuellement dans le dev channel. Quelques-uns des effets ont été simulés dans IE en utilisant les filtres propriétaires séculaires. Bien que ces filtres soient beaucoup plus rapides que leurs amis Canvas, ils sont peu nombreux et limités. jour ont une vraie toile sur IE aussi ...

35
Barrie Reader

Vous pouvez également utiliser StackBlur ou Superfast Blur

15
Quasimondo

Ceci est également bon à considérer:

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/

5
Luckylooke

StackBlur fonctionne: Voici comment je l'utilise: également, fonctionne sur tous les navigateurs et iPad !! contrairement à webkit !!

téléchargez StackBlur v5.0 à partir d'ici: StackBlurv5.

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);

REMARQUES: Les valeurs de rayon pour la fonction stackBlurCanvasRGB peuvent aller de 100 à -100, je pense ... jouez simplement avec les valeurs, vous le ferez fonctionner. ..CanvasRGB fonctionne plus rapidement que CanvasRGBA sur iPad .. au moins c'est ce que je remarque sur iPad 4e génération.

2
Jonathan James

Utiliser CSS

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

Avec CSS3, nous pouvons facilement ajuster une image. Mais rappelez-vous que cela ne change pas l'image. Il n'affiche que l'image ajustée. Pour Chrome

Voir la démo en direct et le code source complet ici

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

Consultez le code suivant pour plus de détails.

Pour rendre une image grise:

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

Pour donner un aspect sépia:

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

Pour régler la luminosité:

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

Pour régler le contraste:

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

Pour brouiller une image:

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