在 FabricJS 中将图像过滤器应用于 HTML 视频答案

【问题标题】：Apply image filter to HTML video in FabricJS在 FabricJS 中将图像过滤器应用于 HTML 视频
【发布时间】：2017-05-10 02:02:05
【问题描述】：

我设法调整了 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());

但它不起作用。

有可能吗？怎么样？

【问题讨论】：

标签： html video fabricjs

【解决方案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中添加这个是否难

【讨论】：