FabricJSのHTMLビデオにイメージフィルタを適用

Question

http://fabricjs.com/video-elementで与えられたFabricJSのHTML 5ビデオの例を変更して、ビデオの不透明度を変更することができました。

次に、私はビデオをぼかすのがクールだとは思わなかった。だから、私はそれをうんざりしましたが運がありません。

私はちょうど

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

下に新しいグレースケールで行を追加したが、それは動作しません。

可能ですか？どうやって？不透明度については

Answer 1

、それは（変数：不透明度）：簡単だグレースケールにhttp://html5doctor.com/video-canvas-magic/

：：グレースケールの場合http://jsfiddle.net/Da7SP/309/

、キャンバスに、それはこのように

可能です

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

ファブリックにこれを追加するのが難しいかどうかわかりません