이미지에 Box Blur 애니메이션을 구현하는 방법은 무엇입니까?

Question

상자 흐림 애니메이션으로 이미지를 흐리게 처리하고 싶습니다. 처음에는 크기가 점차 줄어들어 최종적으로 배경 이미지를 형성하는 거대한 반경의 사각형을 원합니다.

나는 http://www.quasimondo.com/BoxBlurForCanvas/FastBlur2Demo.html을 시도했지만 상자 모양의 흐림을 요구하는 동안 순환 방식으로 처리합니다.

나는 또한 http://desandro.com/resources/close-pixelate/을 시도했지만, 사용하고있는 이미지가 1280px x 800px이고 페이지 배경으로 사용되기 때문에 엄청나게 느립니다.

어떻게 달성 할 수 있습니까?

Answer 1

이미지를 픽셀화할 때 실제로 해상도를 줄이면 (즉, 픽셀을 크게 만드는 경우) 응용 프로그램에 따라 이미지 해상도를 줄인 다음 동일한 영역에서 이미지를 늘릴 수 있습니다.

흐림 필터로 시작하면 훨씬 더 나은 결과를 얻을 수 있습니다. 이것이 없으면, 다운 샘플링 된 이미지는 모든 종류의 앨리어싱 효과를 나타냅니다. 다운 샘플링 알고리즘은 비례에 따라 매끄럽게 진행될 수 있습니다.

주된 트릭은 이미지가 늘어 났을 때 스무딩되지 않도록하는 것입니다.