HTMLキャンバスにグロー効果があり、コンボルートカーネル/マトリックスを潜在的に使用する

Question

私はHTMLキャンバスにPNGイメージを描画しています。キャンバスにblittedされる前にイメージデータに対して畳み込みフィルタを実行できるようにフィルタシステムを実装しました。 。

誰でも、畳み込みカーネル/マトリックス（私は用語が何であるかわかりませんが、私はこれらについて話しています：http://www.html5rocks.com/en/tutorials/canvas/imagefilters/）を使用してグロー効果を作成する方法や、 globalCompositeOperation（https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html）？

私は、不透明度が低くスケーリングされたイメージから始めて、次にイメージを少しスケールダウンしながら不透明度を上げることができます。これは、一種のグロー効果を作成するために機能しますが、画像のエッジの周りのみにします。

理想的な世界では、2次グローテクスチャを使用して輝きを持つ画像の領域を指定できることは素晴らしいことです。どちらのシナリオのアイディアですか？ :)

Answer 1

あなたが探していた行に沿って次のものがあることを願っています。それはかなりうまくいったと思います。そこで、私はthe articleのフィルタライブラリコードを使用し、ライブラリ用の新しいグローフィルタを作成しました。グロー効果を示すLive Demoです。

これは、ライブラリ

Filters.glow = function(pixels, passes, image, glowPasses){ 
     for(var i=0; i < passes; i++){ 
      pixels = Filters.convolute(pixels, 
       [1/9, 1/9, 1/9, 
       1/9, 1/9, 1/9, 
       1/9, 1/9, 1/9 ]); 
     } 

     var tempCanvas = document.createElement("canvas"), 
      glowCanvas = document.createElement("canvas"), 
      tCtx = tempCanvas.getContext("2d"), 
      gCtx = glowCanvas.getContext("2d"); 

     tempCanvas.width = glowCanvas.width = pixels.width; 
     tempCanvas.height = tempCanvas.height = pixels.height; 

     tCtx.putImageData(pixels, 0, 0); 
     gCtx.drawImage(image, 0, 0); 

     gCtx.globalCompositeOperation = "lighter"; 

     for(i = 0; i < glowPasses; i++){ 
      gCtx.drawImage(tempCanvas,0,0); 
     } 

     return Filters.getPixels(glowCanvas); 
    } 

に追加する必要があるフィルタコードであり、これは、あなたが上記のフィルタを使用する方法です。

var glowImage = document.images[1], 
    glowMask = document.images[0], 
    c = document.getElementById("canvas"), 
    ctx = c.getContext("2d"); 

window.onload = function() { 
    var pData = Filters.filterImage(Filters.glow, glowImage, 5, glowMask, 2); 
    c.width = pData.width; 
    c.height = pData.height; 
    ctx.putImageData(pData, 0, 0); 
} 

2枚の画像を提供する必要があります。最初のイメージは、グローが表示されるイメージ、もう1つはイメージに適用される実際のグローマスクです。次に、実行するブラーパスの数を指定して、グローをより目立たせ、実行するグ​​ローの数を指定して、グローをイメージに追加することができます。私はそれをアルファブレンディングするキャンバスにグローバルなコンポジションlighterを使用します。

This articleは、グロー効果を作成する上で非常に優れたリソースです。また、自分の結果をテストするためにグラフィックを取得した場所です。