Библиотеки JavaScript для размытия картинок

Оффтоп javascript
1

Нужна помощь с размытием изображений через JavaScript

Ищу альтернативы библиотеке Pixastic или плагины для jQuery, которые могут размывать картинки на странице.

Что у меня есть:

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

Что уже пробовал:

  • CSS трюк для Firefox - не сработал
  • Библиотеку Pixastic (обычное размытие и fast-blur) - сначала ошибка с jQuery объектом, потом при передаче DOM элемента просто не работает
  • Копировал код из демо Pixastic через Firebug - картинка добавляется, но без эффекта размытия
  • Пробую blur.js - работает, но странно. При повторном вызове jqueryelement.blurjs() первая картинка теряет размытие (фон правильного размера остается, но само изображение пропадает), а вторая размывается нормально

Техническая информация:

Работаю на ColdFusion. Есть вариант использовать ImageBlur() на сервере, но боюсь что будет слишком медленно для страницы с множеством результатов поиска.

Кто-нибудь знает рабочие решения для размытия изображений в браузере?

2

Попробуй Canvas API. Загружаешь картинку на canvas и размываешь через filter или пишешь свой алгоритм. Правда с кроссбраузерностью придется повозиться. Какие браузеры нужно поддерживать? И сколько картинок одновременно размывать будешь?

3

Пару месяцев назад делал то же самое. Взял StackBlitz - быстрая и нормально работает с несколькими картинками сразу. Еще есть SuperFast Blur - потяжелее, но размывает качественнее. Хотя если производительность важна, лучше на сервере это делать. Размыл раз, закешировал, и не грузишь процессор каждому юзеру.

4

Делал похожее пару лет назад. Взял StackBlur.js - быстро работает и не глючит. Можно еще через canvas с CSS filter: blur(), если браузер тянет. Но если картинок много, лучше размывать на сервере и кешировать - клиентское размытие браузер убивает.