Можно ли анимировать фильтр в Fabric.js?

Question

Возможно ли оживить фильтр изображений в Fabric.js? Например, фильтр «pixelate».

Answer 1

Я решил это так же, как демо. К сожалению, фильтры не могут быть анимированы - им нужно слишком много времени на обработку.

Вот мой код:

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

Я знаю, что код не является наиболее эффективным, но это работает. И вы можете видеть, что фильтры Animating потребляют слишком много времени.

(я тестировал с 1920x1080px изображения, может быть, вы можете использовать его с меньшими изображениями)

Answer 2

Вот обновленная версия для фильтра яркости

var brightnessValue = 0.9; 
    var brightnessFilter = new fabric.Image.filters.Brightness({ 
    brightness: brightnessValue 
    }); 
    fabricImage.filters.push(brightnessFilter); 

    fabric.util.requestAnimFrame(function brightnessFilterAnimation() { 
    brightnessValue = brightnessValue - 0.04; 
    brightnessFilter.brightness = brightnessValue; 
    fabricImage.applyFilters(); 
    if (brightnessValue > 0) { 
     fabric.util.requestAnimFrame(brightnessFilterAnimation); 
    } 
    });