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

Question

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

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

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

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

Answer 1

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

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

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