Эффект свечения на холсте HTML, потенциально использующий Convolute Kernel/Matrix

Я рисую изображение PNG на холсте HTML, и я реализовал систему фильтров, позволяющую выполнять сверточные фильтры для данных изображения до того, как они будут переданы на холст.

Есть ли у кого-нибудь идеи, как создать эффект свечения, используя свернутое ядро ​​​​/ матрицу (я не уверен, что такое терминология, но я говорю об этом: http://www.html5rocks.com)/en/tutorials/canvas/imagefilters/) или другими способами, такими как использование globalCompositeOperation (< a href="https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html" rel="noreferrer">https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html< /а>)?

Я знаю, что вы можете начать с низкой непрозрачности и масштабированного изображения, а затем увеличить непрозрачность, немного уменьшив изображение. Это работает для создания эффекта свечения, но только по краю изображения.

В идеальном мире было бы здорово иметь возможность обозначать области изображения, которые имеют свечение, используя текстуру вторичного свечения. Есть идеи по любому сценарию? :)


canvas image html effects glow
person Rob Evans    schedule 13.11.2012    source источник
comment
У вас есть наглядный пример, пример до/после того, как будет выглядеть такой эффект?   -  person eh9    schedule 16.11.2012

Ответы (1)


arrow_upward
22
arrow_downward

Надеюсь, что следующее соответствует тому, что вы хотели сделать, я думаю, это получилось довольно хорошо. Поэтому я использовал код библиотеки фильтров из статьи и просто создал новый фильтр свечения для библиотеки, так как его код был сделан довольно хорошо с самого начала. Вот живая демонстрация, показывающая эффект свечения в действии.

Это код фильтра, который нужно добавить в библиотеку

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 изображения. Первый — это изображение, на котором должно появиться свечение, а второй — фактическая маска свечения, которая применяется к изображению. Затем вы можете указать, сколько проходов размытия нужно выполнить, чтобы сделать свечение более заметным, и сколько проходов свечения выполнить, чтобы добавить свечение к изображению. Я использую глобальную композицию lighter для холста, который смешивает ее с альфа-каналом.

Эта статья — отличный ресурс по созданию эффекта свечения. , я также получил графику, чтобы сравнить свои результаты с их результатами.

person Loktar    schedule 16.11.2012
comment
Это ТОЧНО, как ТОЧНО, лазер-идеально нацелился на то, что я искал. Я думаю, что это, вероятно, первый ответ, который у меня когда-либо был на SO, где ответивший человек действительно полностью прочитал мой вопрос. Серьезное спасибо. Очевидно, я не могу присудить награду за 11 часов, но сделаю это, как только мне будет позволено. Ура приятель. - person Rob Evans; 17.11.2012
comment
@RobEvans очень рад, что это помогло вам :) было довольно весело работать. Мне нравится, как выглядят эффекты свечения, и вы проделали большую часть работы по поиску этой замечательной библиотеки для фильтров холста. - person Loktar; 17.11.2012
comment
Я даю +1 только потому, что Роб был так доволен результатом этого вопроса. Все выигрывают. - person synthesizerpatel; 17.05.2013