將圖像過濾器應用於FabricJS中的HTML視頻

Question

我設法修改了視頻的不透明度，以修改FabricJS的HTML 5視頻示例，其編號爲http://fabricjs.com/video-element。

然後我想，模糊視頻不是很酷。所以我搞砸了，但沒有運氣。

我只是增加了一個符合新的灰度低於

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://jsfiddle.net/Da7SP/309/

灰階，用帆布，很可能

像這樣：http://html5doctor.com/video-canvas-magic/

爲灰度：

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

我不知道是否很難將其添加到織物中