Как вы размываете изображение, используя знаменитый фреймворк?

Question

Как размыть изображение в знаменитом? CSS-эквивалент -webkit-filter: blur(5px);,

Бонусные баллы за пример того, как это сделать в рамках знаменитой / угловой комбинации.

Я надеялся на что-то вроде:

<fa-modifier fa-blur="5">
    <fa-image-surface fa-image-url="coolimage.png" fa-size="[640,320]">
    </fa-image-surface>
</fa-modifier>

После определенных действий я хотел бы иметь возможность анимировать от размытия до "не размытия".

Answer 1

Пока что единственный способ, который я нашел, это использовать css.

    <fa-image-surface class="{{blurClass}}" fa-image-url="coolimage.png" fa-size="[640,320]" fa-click="imageClick()">
    </fa-image-surface>    

в контроллере

$scope.blurClass = "blur-in";  // start with no blur
$scope.imageClick = function() {
    $scope.blurClass = "blur-out"; // animate to a blur
}

В.css

.blur-out {
    -webkit-filter: blur(8px);
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}
.blur-in {
    -webkit-filter: blur(0px);
    -webkit-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
}

Answer 2

Используйте fa-canvas-surface, нарисуйте изображение на холсте, а затем используйте один из алгоритмов размытия. В некоторых браузерах я видел проблемы с многоуровневой фильтрацией CSS и z-преобразованиями, что побудило меня использовать холст. Этот StackBlur из Quasimondo выглядит намного лучше, чем CSS-фильтр размытия.

StackBlur Квазимондо http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html