Is it possible to animate filter in Fabric.js?

Question

Is it possible to animate the images filter in Fabric.js? Such as a "pixelate" filter.

Answer 1

I solved it in the same way like the demo. Unfortunately filters aren't able to be animated - they need too much processing time.

Here's my Code:

image = ... //Image, where the filter should be applied

var filter = new fabric.Image.filters.RemoveWhite({
    threshold: 0,
    distance:  140
});
image.filters.push(filter);
image.applyFilters(canvas.renderAll.bind(canvas));

animate(image,1, 400);   //Start the Animation

function animate(image,value, stop){
    value += ((stop-value)*0.02);    //Change the threshold-value

    if (image.filters[0]) {   
        image.filters[0]['threshold'] = value;
        console.log(value);
        image.applyFilters(canvas.renderAll.bind(canvas));  //Start creating the new image

        if(value<stop-100){
            setTimeout(function(){act(image,value,stop);},1);  
        }
    }
}

I know the code isn't the most efficient one, but it works. And you can see that Animating filters consumes too much time.

(I tested it with a 1920x1080px image, maybe you can use it with smaller images)