Размытие JavaScript на изображениях - PullRequest
0 голосов
/ 23 марта 2012

Существует ли библиотека javascript, отличная от Pixastic, или расширение jquery для размытия изображений?

ситуация: У меня есть страница результатов поиска.результаты состоят из группы пользователей.у этих пользователей есть списки изображений, которые скрыты под кнопкой (display: none;).Некоторые из этих списков изображений являются частными.Частные списки изображений должны быть размыты.

попытки: Я уже попробовал этот трюк css только для firefox, но, похоже, это не сработало.Я уже попробовал библиотеку Pixastic, быстрое размытие, а также обычное размытие, но это сначала дало мне ошибку, потому что я передал объект jquery.Но когда я изменил его на объект DOM, он просто не работал (но больше не выдавал ошибок).Я наконец-то пошел и попытался использовать код, использованный в их реальной демонстрации (получил через firebug), создав изображение в js, создав обработчик эффекта размытия и добавив изображение, но это просто добавило изображение, не размытое.

specs: Я работаю в Coldfusion, поэтому я собираюсь попробовать ImageBlur(), но, поскольку это необходимо сделать на странице результатов поиска, это может быть не очень хорошимИдея размыть так много изображений на стороне сервера ..

обновление: Я пытаюсь работать с blur.js, который, кажется, работает нормально.но когда я вызываю используемую функцию (jqueryelement.blurjs();) во второй раз, мое первое изображение не размывается (оно обрабатывается библиотекой и получает фон правильного размера, но без изображения), но второеодин делает.Если я динамически создаю серверную строку javascript, это означает, что размытым будет только последнее изображение ..: \

Ответы [ 2 ]

1 голос
/ 23 марта 2012

Здесь есть несколько указателей на размытие:

Размытие по Гауссу при использовании jQuery

Особенно ответ Квазимодо, где он сделал функцию размытия, которая используетсяв этом jQuery добавить:

http://blurjs.com/

0 голосов
/ 31 января 2016

Вы всегда можете использовать полу-новое свойство CSS3 filter.

filter: blur(10px);

Фильтры полностью анимируемы и работают в большинстве браузеров (как вы можете видеть здесь , все браузеры, кроме IE) Также вам понадобится префикс -webkit- для большинства браузеров.

jsfiddle

...