video - 如何通过javascript在像ffmpeg风格的 Canvas 中绘制马赛克?

标签 video canvas ffmpeg blur mosaic

enter image description here

视频的马赛克是由 ffmpeg 添加的,但我需要在 Canvas 中使用 javascrip 进行绘制。

我试过 BoxBlur 和 GaussBlur ,它们都不像 ffmpeg 的风格,
有人知道红色循环中的样式算法还是只是模糊样式的名称?
感谢您的关注

最佳答案

这是一种简单的框模糊形式。您可以使用 drawImage() 的内置重采样/插值在 Canvas 中实现此目的。通过绘制两个 channel ,首先使用单个垂直列并按宽度缩放,然后在顶部使用半 alpha 混合,单行并垂直绘制。

使用给定 image 的修改版本的示例(但放大了,并且下面示例代码中的源区域扩大了 10 倍以匹配视觉效果)。

需要注意的一个警告是,在这种情况下,垂直样本是从下到上的。您可能需要考虑到 drawImage()将从上到下绘制。您可以使用转换来处理这个问题(scale(1,-1) + 适当的偏移量)。

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);
}
<canvas id=c></canvas>

关于video - 如何通过javascript在像ffmpeg风格的 Canvas 中绘制马赛克?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47149462/

相关文章:

video - FFMPEG:视频比特率的动态变化

php - 从视频中提取特定帧的最快方法(PHP/ffmpeg/任何东西)

objective-c - exportAsynchronouslyWithCompletionHandler 因多个视频文件而失败(代码=-11820)

javascript - Opera 中奇怪的 Canvas 旋转

javascript - 如何在三个 js 渲染的 Canvas 中为 Canvas 添加结束标记?

Delphi定制图纸-发光玻璃

android - exoplayer- 自动更改质量不起作用 (hls)

ffmpeg - 如何制作在第一段中间开始播放的 MPEG-DASH MPD?

python - OpenCV VideoCapture 以来自 GoPro 的视频结束

video - 如何使用 Audacity 和 ffmpeg 放大音量?