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>

经过一定的行动后，我希望能够从模糊到＃34;无模糊＆＃34;。

。

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变换的分层问题，这促使我采用画布方法。来自Quasimondo的StackBlur看起来比模糊CSS过滤器更好。

Quasimondo的StackBlur http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

你如何使用着名的框架模糊图像？

2 个答案: