私はJavaScriptが良くなく、Ivan Kuckir's Fastest Gaussian Blurコードを正常に動作させることを試みています。ページを読み込むと、応答がなくなり、何らかの形でウィンドウを閉じる必要があります。私が使用するコードは次のとおりです。何が間違っているの？最速ガウスブラーが動作しません

<html> 
<head> 
<script src="Path_To_GaussianBlur.js"></script> 
</head> 

<body> 
<img id="sourceImage" src="SomeImage_200px_x_200px.jpg" /> 
<canvas id="canvas1" width="200" height="200" style="border: 1px solid blue"></canvas> 
<canvas id="canvas2" width="200" height="200" style="border: 1px solid red"></canvas> 

<script> 
    document.getElementById("sourceImage").onload = function() { 

     var c1 = document.getElementById("canvas1"); 
     var c2 = document.getElementById("canvas2"); 

     var ctx1 = c1.getContext("2d"); 
     var ctx2 = c2.getContext("2d"); 

     var img = document.getElementById("sourceImage"); 

     ctx1.drawImage(img, 0, 0); 
     ctx2.drawImage(img, 0, 0); 

     var source = ctx1.getImageData(0, 0, c1.width, c1.height); 
     var target = ctx2.getImageData(0, 0, c2.width, c2.height); 

     for (var i = 0; i < source.data.length; i += 4) { 
      // red chanel 
      gaussBlur_4(source.data[i], target.data[i], c1.width, c1.height, 2); 
      // green channel 
      gaussBlur_4(source.data[i + 1], target.data[i + 1], c1.width, c1.height, 2); 
      // blue channel 
      gaussBlur_4(source.data[i + 2], target.data[i + 2], c1.width, c1.height, 2); 
     } 

     ctx2.putImageData(target, 0, 0); 
    }; 
</script> 
</body> 
</html>

出典

2016-05-28 Kamran

このアルゴリズムはかなりビットであり、javascriptの実行が決して停止せず、ブラウザーを停止/ハングするため、無限の再帰があると思います... –

'gaussBlur_4（...）'メソッドが間違った引数で！ – Kamran

私もそうだ@kamran –

コメントに記載されているように、rgbaアレイを別々のチャネルに分割する必要があります。今、あなたはソースアレイと同様に設定し、ターゲットアレイを使用してぼかし機能にそれらの配列のそれぞれを渡すことができ

スプリット

var idata = ctx.getImageData(0, 0, w, h), // assumes ctx/w/h to be defined 
    rgba = idata.data, 
    len = w * h, 
    rSrc = new Uint8Array(len),   // source arrays 
    gSrc = new Uint8Array(len), 
    bSrc = new Uint8Array(len), 
    aSrc = new Uint8Array(len), 
    // define target arrays the same way as above 
    i = 0, offset = 0; 

for(; i < len; i++) { 
    rSrc[i] = rgba[offset++]; 
    gSrc[i] = rgba[offset++]; 
    bSrc[i] = rgba[offset++]; 
    aSrc[i] = rgba[offset++]; 
}

を、：あなたはここで一つであり、いくつかの方法でこれを行うことができますrgba形式に結果をマージします。

は

gaussBlur_4(rSrc, rTrg, w, h, radius); 
gaussBlur_4(gSrc, gTrg, w, h, radius); 
gaussBlur_4(bSrc, bTrg, w, h, radius); 
gaussBlur_4(aSrc, aTrg, w, h, radius);

追加のヒントを適用します：あなたは（写真のように）画像を使用している場合、あなたはどれも（あるいは技術的に、キャンバスに完全に不透明であるが）存在しないため、アルファチャンネルをぼかしスキップすることができます。

マージするマージ、単に行う：

for(i = 0, offset = 0; i < len; i++) { 
    rgba[offset++] = rTrg[i]; 
    rgba[offset++] = gTrg[i]; 
    rgba[offset++] = bTrg[i]; 
    rgba[offset++] = aTrg[i]; // or just increase offset if you skipped alpha 
} 

ctx.putImageData(idata, 0, 0);

ためにSO実行例では、中に見出すことができるライセンスの競合このfiddle（及びhere代替スプリット/ 32を使用してマージされビットアプローチ）。

出典

2016-05-31 05:00:14 K3N

ニースの答え！透明にぼかす場合は、ぼかしを行う前にRGBにアルファを掛けてぼかし後に分割する必要があります。 –

最速ガウスブラーが動作しません

答えて

スプリット

は

関連する問題