Hiệu ứng phát sáng trên vải HTML, có khả năng sử dụng hạt nhân/ma trận kết hợp

Question

Tôi đang vẽ hình ảnh PNG vào khung HTML và tôi đã triển khai hệ thống bộ lọc để cho phép các bộ lọc convolute được thực thi dựa trên dữ liệu hình ảnh trước khi nó được chuyển vào khung vẽ .

Có ai có ý tưởng cách tạo hiệu ứng ánh sáng bằng cách sử dụng hạt nhân/ma trận liên tục (tôi không chắc thuật ngữ là gì nhưng tôi đang nói về: http://www.html5rocks.com/en/tutorials/canvas/imagefilters/) hoặc bằng các cách khác như sử dụng globalCompositeOperation (https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html)?

Tôi biết rằng bạn có thể bắt đầu với độ mờ thấp và hình ảnh được chia tỷ lệ, sau đó tăng độ mờ trong khi thu nhỏ hình ảnh xuống một chút. Điều này làm việc để tạo ra một loại hiệu ứng ánh sáng nhưng chỉ xung quanh các cạnh của một hình ảnh.

Trong một thế giới lý tưởng, thật tuyệt vời khi có thể chỉ định các khu vực của hình ảnh phát sáng bằng kết cấu phát sáng phụ. Bất kỳ ý tưởng về một trong hai kịch bản? :)

Answer 1

Hãy hy vọng những điều sau đây nằm dọc theo những gì bạn đang muốn làm, tôi nghĩ điều đó hóa ra khá tốt. Vì vậy, tôi đã sử dụng mã thư viện bộ lọc từ the article và vừa tạo bộ lọc phát sáng mới cho thư viện, vì mã của anh ấy đã được thực hiện khá tốt để bắt đầu. Dưới đây là Live Demo cho biết hiệu ứng phát sáng đang hoạt động.

Đây là mã bộ lọc mà bạn cần phải thêm vào thư viện

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

Và đây là cách bạn sẽ sử dụng bộ lọc trên.

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

Bạn cần cung cấp 2 hình ảnh. Đầu tiên là hình ảnh bạn muốn ánh sáng xuất hiện và thứ hai là mặt nạ phát sáng thực tế được áp dụng cho hình ảnh. Sau đó, bạn có thể chỉ định số lượng hiệu ứng chuyển mờ thực hiện, làm cho ánh sáng trở nên nổi bật hơn và số lượng ánh sáng chuyển sang thực hiện, làm tăng độ sáng cho hình ảnh. Tôi sử dụng các thành phần toàn cầu lighter cho canvas mà alpha pha trộn nó.

This article là một tài nguyên khá tuyệt vời khi tạo hiệu ứng ánh sáng, đó cũng là nơi tôi có đồ họa để kiểm tra kết quả của mình chống lại chúng.