HTML Tuvalindeki Parlama Efekti, Potansiyel Olarak Konvolüs Çekirdeği/Matrisi Kullanıyor

Question

Bir HTML tuvaline PNG resmi çiziyorum ve kanvas filtrelenmeden önce görüntü verilerine karşı ortak filtrelerin yürütülmesini sağlamak için bir filtre sistemi uyguladım .

Herhangi bir kavisli çekirdek/matris kullanarak bir parlaklık efektinin nasıl oluşturulacağı hakkında bir fikriniz var mı (terminolojinin ne olduğundan emin değilim ama bunlardan bahsediyorum: http://www.html5rocks.com/en/tutorials/canvas/imagefilters/) ya da globalCompositeOperation (https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html)?

Düşük opaklık ve ölçeklenmiş bir görüntü ile başlayıp görüntüyü biraz küçültürken opaklığı artırabileceğinizi biliyorum. Bu, bir çeşit parıltı efekti oluşturmak için çalışır, ancak sadece bir görüntünün kenarı etrafında.

İdeal bir dünyada, ikincil bir ışıma dokusu kullanarak parıldayan görüntünün alanlarını belirleyebilmek harika olurdu. Senaryodaki herhangi bir fikir var mı?

Answer 1

Aşağıdakiler, yapmak istediğiniz şeylerin çizgileri boyunca ilerlediklerinde, bunun oldukça iyi olduğunu düşünüyorum. Bu yüzden filtre kitaplığı kodunu the article'dan kullandım ve kodunun iyi bir şekilde başlaması için yeni bir ışıma filtresi oluşturdum. İşte buradaki parlama efektini gösteren bir Live Demo.

Bu

kütüphanede

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

eklemeniz gereken filtre kodudur Ve bu yukarıdaki filtre kullanacak nasıl.

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 resim ile görmeniz gerekir. Birincisi, ışığın görünmesini istediğiniz görüntüdür, ikincisi ise görüntüye uygulanan gerçek parlaklık maskesidir. Daha sonra ne kadar bulanıklık geçişi gerçekleştirileceğini belirtebilirsiniz, bu da parlaklığı daha belirgin hale getirir ve parlaklığı görüntüye yansıtan ne kadar parlaklık yapar. Ben alfa harmanlayan tuval için lighter genel kompozisyonunu kullanıyorum.

This article, parlaklık efekti oluşturma konusunda oldukça harika bir kaynaktır, sonuçlarımı kendi kendilerine karşı test etmek için grafikleri aldığım yer.