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

fabricjs에 이것을 추가하는 것이 어려운지 나는 모른다.