How to draw mosaic by javascript in a canvas like ffmpeg style?

The video's mosaic is added by ffmpeg ,but I need to draw it with javascrip in canvas.

I had tried BoxBlur and GaussBlur ,both of them ain't worked like ffmpeg' style, somebody know the style's Algorithm in red cycle or just the name of the blur style? thanks for your attention

It's a simple form of box blur. You can achieve this in canvas using the built-in resampling/interpolation of drawImage() by drawing two passes, first using a single vertical column and draw scaled in width, and then on top using half alpha to blend, a single row and draw out vertically.

An example using a modified version of the given image (but enlarged, and source region in example code below is expanded 10x to match the visual).

One caveat to be aware of is that in this case the vertical sample goes from bottom to top; you may need to take that into consideration as the drawImage() will draw from top to bottom. You can use transforms to deal with this (scale(1,-1) + proper offsets).

var ctx, img = new Image; img.onload = blur; img.src = "//i.sstatic.net/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);
}

<canvas id=c></canvas>