是否可以在Fabric.js中设置过滤器的动画？

Question

是否可以在Fabric.js中设置图像过滤器的动画？例如"像素化"过滤器.

Answer 1

我按照demo的方法解决了。不幸的是，过滤器无法进行动画处理 - 它们需要太多的处理时间。

这是我的代码：

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);  
        }
    }
}

我知道该代码不是最有效的代码，但它可以工作。您可以看到动画过滤器消耗了太多时间。

（我使用 1920x1080px 图像进行了测试，也许您可​​以将其用于较小的图像）