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/

To Grayscale：

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中添加它是否很困难

将图像过滤器应用于FabricJS中的HTML视频

1 个答案: