如何在ffmpeg样式的画布中通过javascript绘制马赛克？

Question

视频的马赛克由ffmpeg添加，但我需要在画布中用javascrip绘制它。

我曾尝试过BoxBlur和GaussBlur，两者都没有像ffmpeg那样工作， 有人知道红色循环中的样式算法还是模糊样式的名称？ 谢谢你的关注

Answer 1

这是一种简单的盒子模糊形式。您可以使用内置的drawImage()重新采样/插值通过绘制两个通道来实现此功能，首先使用单个垂直列并绘制宽度缩放，然后使用半个alpha进行混合，单行并垂直抽出。

使用给定image的修改版本的示例（但在下面的示例代码中放大了，源区域扩展了10倍以匹配视觉效果）。

需要注意的一点是，在这种情况下，垂直样本从下到上;您可能需要考虑到这一点，因为drawImage()将从上到下绘制。您可以使用转换来处理此问题（scale(1,-1) +正确的偏移量）。

＆＃13;

＆＃13;

var ctx, img = new Image; img.onload = blur; img.src = "//i.stack.imgur.com/NbSH2.png";
function blur() {
  c.width = this.width; c.height = this.height;
  ctx = c.getContext("2d");
  ctx.drawImage(this, 0, 0);
  
  // use alpha here as well on top of original (not present in given image).
  
  // pass 1: horizontal  Source column (10x)     Target area
  ctx.drawImage(this,    50, 0, 10, 210,         50, 0, c.width - 50, 210);
  
  // pass 2: vertical
  ctx.globalAlpha = 0.5;
  ctx.drawImage(this,    50, 210, c.width - 50,  10, 50, 0, c.width - 50, 210);
}

＆＃13;

<canvas id=c></canvas>

＆＃13;

＆＃13;

＆＃13;