Image filters demos aren't working on Fabric JS website.

[noisiak]

Version

Website.

Test Case

http://fabricjs.com/image-filters

Steps to reproduce

Go to http://fabricjs.com/image-filters and play with the filters. None of them work.

Expected Behavior

Demos to work

Actual Behavior

Demos don't work.

[durga598]

@asturur #4828 in this PR, you had set group to dirty,shouldn't it also for image object ?

[JoshMoreno]

There are console errors. Looks like it's an Angular issue. Here's what I'm getting:

MINERR_ASSET:22 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.6/$injector/modulerr?p0=kitchensink&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.6%2F%24injector%2Fnomod%3Fp0%3Dkitchensink%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.6%2Fangular.min.js%3A6%3A449%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.6%2Fangular.min.js%3A20%3A185%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.6%2Fangular.min.js%3A21%3A170%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.6%2Fangular.min.js%3A29%3A116%0A%20%20%20%20at%20Array.forEach%20(%3Canonymous%3E)%0A%20%20%20%20at%20q%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.6%2Fangular.min.js%3A7%3A274)%0A%20%20%20%20at%20e%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.6%2Fangular.min.js%3A29%3A56)%0A%20%20%20%20at%20Yb%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.6%2Fangular.min.js%3A32%3A125)%0A%20%20%20%20at%20c%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.6%2Fangular.min.js%3A17%3A394)%0A%20%20%20%20at%20Xb%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.6%2Fangular.min.js%3A18%3A81)
    at MINERR_ASSET:22
    at angular.js:3642
    at Array.forEach (<anonymous>)
    at q (angular.js:302)
    at e (angular.js:3608)
    at Yb (angular.js:3548)
    at c (angular.js:1296)
    at Xb (angular.js:1311)
    at Rc (angular.js:1260)
    at angular.js:20534

[p-glynn]

a temporary workaround to cause the filters to take effect:

1. select an image
2. apply filters
3. re-size the image

¯\(ツ)/¯

@noisiak @JoshMoreno

[noisiak]

Oh, indeed. The hack sort of works, although is very buggy. Thanks for the tip. @p-glynn

Hope a fix could be found soon. New users (like me) could get confused by.

[asturur]

Since clipPath force image caching for images too, the fabricJS version that was in the website had broken filtering.
I updated my PR code and the website so that the cache is invalidated properly.