Размытие изображения с помощью CSS/Javascript: возможно ли это?

Ответ 1

Yep, это работает с лечением:

Pixastic - экспериментальная библиотека, которая позволяет выполнять различные операции с изображениями, используя только немного JavaScript. Эффекты, поддерживаемые из коробки, включают в себя десатурацию/оттенки серого, инвертирование, переворот, регулировку яркости/контрастности, оттенок/насыщенность, тиснение, размытие и многое другое...

Pixastic работает, используя элемент Canvas HTML5, который обеспечивает доступ к необработанным пиксельным данным, тем самым открывая для более продвинутых эффектов изображения. Именно здесь вступает в игру "экспериментальная" часть. Canvas поддерживается только некоторыми браузерами и, к сожалению, Internet Explorer не является одним из них. Тем не менее, он хорошо поддерживается как в Firefox, так и в Opera, а поддержка Safari только что появилась с недавней версией Safari 4 (бета). В настоящее время Chrome работает в dev-канале. Несколько эффектов были смоделированы в IE с использованием старых фильтров. Хотя эти фильтры намного быстрее, чем их друзья Canvas, их мало и ограничено. Надеюсь, когда-нибудь у нас будет настоящий холст на IE...

Ответ 2

В качестве альтернативы вы можете использовать StackBlur или Superfast Blur

Ответ 3

Это также полезно рассмотреть:

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/

Ответ 4

StackBlur works: Вот как я его использую: также работает во всех браузерах и ipad!! в отличие от webkit!

скачать StackBlur v5.0 отсюда: 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);

ПРИМЕЧАНИЯ: Значения радиуса для функции stackBlurCanvasRGB могут варьироваться от 100 до 100. Просто играйте со значениями, вы получите ее работу. ..CanvasRGB работает быстрее, чем CanvasRGBA на iPad. Меньше всего это то, что я замечаю на iPad 4-го поколения.

Ответ 5

С CSS3 мы можем легко настроить изображение. Но помните, что это не меняет образ. Он отображает только отрегулированное изображение. Для Chrome

Смотрите демо-версию и полный исходный код здесь

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

Подробнее см. следующий код.

Чтобы сделать изображение серым:

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

Чтобы посмотреть вид сепии:

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

Чтобы настроить яркость:

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

Чтобы настроить контрастность:

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

Чтобы размыть изображение:

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

Ответ 6

Использование CSS

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