Bildfilter auf HTML-Video in FabricJS anwenden

Question

Ich habe es geschafft, das HTML 5-Videobeispiel für FabricJS, das unter http://fabricjs.com/video-element angegeben wurde, anzupassen, um die Deckkraft des Videos zu ändern.

Dann dachte ich, wäre es nicht cool, das Video zu verwischen. Also habe ich damit herumgespielt, aber kein Glück.

habe ich nur noch eine Zeile mit einem neuen Graustufen unter

var video1 = new fabric.Image(video1El, { 
    left: 350, 
    top: 300, 
    angle: -15, 
    originX: 'center', 
    originY: 'center' 
}); 
video1.filters.push(new fabric.Image.filters.Grayscale()); 

aber es funktioniert nicht.

Ist es möglich? Wie?

Answer 1

Für Opazität, ist es einfach (Variable: Opazität): http://jsfiddle.net/Da7SP/309/

Für Graustufen, mit Leinwand, dann ist es möglich

So: http://html5doctor.com/video-canvas-magic/

Um Graustufen:

function draw(v,c,bc,w,h) { 
    if(v.paused || v.ended) return false; 
    // First, draw it into the backing canvas 
    bc.drawImage(v,0,0,w,h); 
    // Grab the pixel data from the backing canvas 
    var idata = bc.getImageData(0,0,w,h); 
    var data = idata.data; 
    // Loop through the pixels, turning them grayscale 
    for(var i = 0; i < data.length; i+=4) { 
     var r = data[i]; 
     var g = data[i+1]; 
     var b = data[i+2]; 
     var brightness = (3*r+4*g+b)>>>3; 
     data[i] = brightness; 
     data[i+1] = brightness; 
     data[i+2] = brightness; 
    } 
    idata.data = data; 
    // Draw the pixels onto the visible canvas 
    c.putImageData(idata,0,0); 
    // Start over! 
    setTimeout(function(){ draw(v,c,bc,w,h); }, 0); 
} 

Ich weiß nicht, ob es schwierig ist, dies in fabricjs

hinzuzufügen