Glow-Effekt auf HTML-Canvas, möglicherweise mit Convolute Kernel/Matrix

Question

Ich zeichne ein PNG-Bild zu einem HTML-Canvas und ich habe ein Filtersystem implementiert, um Konvolute Filter gegen die Bilddaten zu ermöglichen, bevor es auf die Leinwand geschickt wird .

Hat jemand eine Idee, wie man einen Glow-Effekt mit einem Konvolut Kernel/Matrix (ich bin nicht sicher, was die Terminologie ist, aber ich spreche über diese: http://www.html5rocks.com/en/tutorials/canvas/imagefilters/) oder mit anderen Mitteln wie die Verwendung der globalCompositeOperation (https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html)?

Ich bin mir bewusst, dass Sie mit einer niedrigen Deckkraft und einem skalierten Bild beginnen können, dann erhöhen Sie die Opazität, während Sie das Bild ein wenig verkleinern. Dies funktioniert, um eine Art von Leuchteffekt zu erzeugen, aber nur um den Rand eines Bildes herum.

In einer idealen Welt wäre es toll, in der Lage zu sein, Bereiche des Bildes, die leuchten, mit einer sekundären Leuchttextur zu bezeichnen. Irgendwelche Ideen zu beiden Szenarien? :)

Answer 1

Hoffe das Folgende ist in der Linie von dem, was Sie suchen zu tun, ich denke, es ist ziemlich gut ausgegangen. Also habe ich den Filter-Bibliothekscode von the article verwendet und gerade einen neuen Glow-Filter für die Bibliothek erstellt, da sein Code anfangs ziemlich gut gemacht war. Hier ist eine zeigt den Glüheffekt in Aktion.

Dies ist der Filter Code, den Sie

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); 
    } 

Und das ist in die Bibliothek hinzufügen müssen, wie Sie die obigen Filter verwenden würden.

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); 
} 

Sie müssen es mit 2 Bildern bereitstellen. Das erste ist das Bild, auf dem das Glühen erscheinen soll, und das zweite ist die tatsächliche Glimmmaske, die auf das Bild angewendet wird. Sie können dann angeben, wie viele Unschärfebildschirme ausgeführt werden sollen, wodurch das Scheinen hervorgehoben wird und wie viele Schimmerdurchgänge durchgeführt werden müssen, die dem Bild Glanz verleihen. Ich benutze die globale Zusammensetzung lighter für die Leinwand, die alpha es mischt.

This article ist eine ziemlich gute Ressource für die Erstellung eines Glow-Effekt, es ist auch, wo ich die Grafiken, um meine Ergebnisse gegen ihre zu testen.