どのようにffmpegスタイルのようなキャンバスでjavascriptでモザイクを描くのですか？

Question

ビデオのモザイクはffmpegで追加されますが、キャンバスにjavascripで描画する必要があります。

私はBoxBlurとGaussBlurを試していましたが、どちらもffmpegのスタイルのようには動作しませんでした 誰かがスタイルのアルゴリズムを赤いサイクルで知っているのか、ちょうどぼかしスタイルの名前を知っていますか？ あなたの注目をいただきありがとうございます

Answer 1

これは単純なボックスボケの形です。 drawImage()の組み込みの再サンプリング/補間を使用してキャンバスでこれを実現するには、最初に単一の垂直列を使用して幅を調整し、上に半分のアルファを使用して1つの行を作成し、垂直方向に引き出します。

与えられた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>