Rozmycie obrazu za pomocą CSS/Javascript: czy to możliwe?

Question

Czy można dodać efekt rozmycia do obrazu za pomocą CSS i JavaScript?

Answer 1

Tak, this works a treat:

Pixastic jest biblioteką eksperymentalny, który pozwala na wykonywanie różnych operacji na obrazach używając tylko trochę JavaScript. Efekty obsługiwane z pudełka obejmują desaturację/skalę szarości, odwracanie, odbijanie, regulację jasności/kontrastu, odcień/nasycenie, wytłoczenie, rozmycie i wiele innych ...

Prace Pixastic za pomocą elementu HTML5 Canvas, który zapewnia dostęp do surowych pikseli, otwierając tym samym bardziej zaawansowane efekty obrazu. Tutaj zaczyna działać "eksperymentalna" część. Canvas jest obsługiwany tylko przez niektóre przeglądarki i niestety Internet Explorer nie jest jednym z nich. Jest on jednak dobrze obsługiwany zarówno w Firefoksie, jak i Operze, a obsługa Safari dopiero nadejdzie wraz z ostatnią wersją Safari 4 (beta). Chrome działa obecnie w kanale deweloperskim. Kilka efektów zostało zasymulowanych w IE przy użyciu starszych filtrów zastrzeżonych. Chociaż filtry są znacznie szybsze niż ich znajomi Canvas, są one ograniczone i nieliczne. Mam nadzieję, że będziemy mieć jeden dzień prawdziwej Canvas na IE, jak również ...

Answer 2

Alternatywnie można użyć StackBlur lub Superfast Blur

Answer 3

Jest to również dobry do rozważenia:

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

Dzięki CSS3 możemy z łatwością dopasować obraz. Ale pamiętaj, że to nie zmienia obrazu. Wyświetla tylko dopasowany obraz. Chrome

Zobacz na żywo demo i kompletny kod źródłowy tutaj

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

Zobacz poniższy kod na więcej szczegółów.

Aby szary obraz:

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

dać wygląd Sepia:

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

do ustawiania jasności:

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

Aby wyregulować kontrast:

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

do rozmazania obrazu:

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

Answer 5

StackBlur działa: Oto jak używam go: również działa na wszystkich przeglądarkach i iPad !! w przeciwieństwie do webkita !!

pobierz StackBlur v5.0 stąd: 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); 

UWAGI: wartości promień funkcji stackBlurCanvasRGB może wynosić od Myślę 100 do - 100 .. po prostu baw się wartościami, sprawisz, że działa. ..CanvasRGB działa szybciej niż CanvasRGBA na iPadzie. Przynajmniej to zauważam na iPadzie 4. generacji.

Answer 6

Za pomocą CSS

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