Как реализовать анимацию Box Blur на изображении? [пиксельное изображение]

Я хочу размыть изображение с помощью анимации размытия прямоугольника, сначала мне нужен квадрат с огромным радиусом, который постепенно уменьшался бы в размере и, наконец, сформировал фоновое изображение.

Я пробовал http://www.quasimondo.com/BoxBlurForCanvas/FastBlur2Demo.html, но это делает это по кругу, в то время как мне требуется прямоугольное размытие.

Я также пробовал http://desandro.com/resources/close-pixelate/, но это ужасно медленный, поскольку изображение, которое я использую, имеет размер 1280 x 800 пикселей и используется в качестве фона страницы.

Любая помощь в том, как этого можно достичь?


person Tarun    schedule 07.12.2011    source источник
comment
Взгляните на этот вопрос / ответ http://stackoverflow.com/questions/2471226/dynamically-pixelate-an-html-image-element   -  person Manse    schedule 07.12.2011


Ответы (1)


Когда вы пикселируете изображение, вы эффективно уменьшаете разрешение (то есть увеличиваете пиксели). В зависимости от вашего приложения вы можете просто уменьшить разрешение изображения, а затем растянуть изображение в той же области.

Использование фильтра размытия дает гораздо лучшие результаты. Без этого субдискретизированное изображение демонстрирует всевозможные эффекты наложения спектров. Имейте в виду, что ваш алгоритм понижающей дискретизации может сглаживаться по мере масштабирования.

Основная хитрость - убедиться, что при растяжении изображение не сглаживается.

person Chris    schedule 08.12.2011