如何一個發光的過濾器添加到圖像

這是我想要的效果（第2一個）：如何一個發光的過濾器添加到圖像

在Photoshop

1）複製層
2）降低的曝光新層
3）添加模糊
4）混合模式線性減淡（添加）

程序員本人就知道達到了這個效果長以前，他從來沒有告訴過如何用代碼做，但給了我指示，以達到photoshop

它已經有一段時間，並開始爲我自己學習網絡開發，這種效果是一種叫我的注意力（是的，失去了與這個人的所有更多鈔票接觸）

起初我以爲這是用CSS濾鏡效果https://www.w3schools.com/cssref/css3_pr_filter.asp

但是實現，而它包含的模糊（％）我似乎無法找到一種方法來實現博覽會或甚至更糟糕的線性閃避混合模式。

有沒有人知道這個過濾器是如何製造的？我猜他沒有使用CSS，而是使用JavaScript。

任何幫助表示讚賞。

編輯：哦，你是對的，它只是玩這些值，有一個很好的過濾器，但會繼續玩他們！謝謝

來源

2017-08-14 Andre

要我在這些圖像的差異看起來像合同更高，這是它....我想你會發現一種方法，使一個特定的過濾器的唯一途徑是通過打可能會結合一些看看你有多接近你想要的東西.... – NewToJS

除了過濾器：對比，它看起來像一個面具已被應用，這是不是任何標準的一部分。 –

您可以使用各種技術來模糊一個版本，並使用添加混合將它合成到原始頂部。

這是一個使用圖像作爲背景圖像的示例，其中after元素繼承圖像，使用混合混合添加模糊和複合，並且還可以使用AKA「add」和另一個「linear-dodge」。）：

div { 
 
    background:url(//i.stack.imgur.com/REbGC.png); 
 
    width:190px; 
 
    height:190px; 
 
    } 
 

 
/* Create an overlay blurring the background */ 
 
div:after { 
 
    position:absolute; 
 
    content:""; 
 
    width:190px; 
 
    height:190px; 
 
    background:inherit; 
 
    filter:blur(9px);  /* glow range */ 
 
    opacity:0.8; 
 
    mix-blend-mode: lighten; /* lighter (add) can be used as well */ 
 
    }

<div></div>

同樣可以使用帆布元件代替來實現，但由於並非所有的瀏覽器支持的2D上下文新filter屬性可能需要模糊手動（加入亮度來演示b還有elow）。

var img = new Image; img.onload = draw; img.src = "//i.stack.imgur.com/REbGC.png"; 
 
var blur = document.getElementById("blur"), blend = document.getElementById("blend"), 
 
    luma = document.getElementById("luma"); 
 

 
function draw() { 
 
    var ctx = c.getContext("2d"); 
 
    ctx.drawImage(this, 0, 0); 
 
    ctx.filter = "brightness(" + luma.value + ") blur(" + blur.value + "px)"; // note: not all browsers support this yet (FF/Chrome OK) 
 
    ctx.globalCompositeOperation = "lighten"; 
 
    ctx.globalAlpha = +blend.value; 
 
    ctx.drawImage(this, 0, 0); 
 
    ctx.filter = "none"; // reset 
 
    ctx.globalCompositeOperation = "source-over"; 
 
} 
 

 
blur.oninput = blend.oninput = luma.oninput = draw.bind(img);

<div>Blur: <input id=blur type=range min=0 max=30 value=9></div> 
 
<div>Blend: <input id=blend type=range min=0 max=1 step=0.1 value=0.8></div> 
 
<div>Luma: <input id=luma type=range min=0.5 max=2 step=0.1 value=1></div> 
 
<canvas width=190 height=190 id=c></canvas>

來源

2017-08-15 06:00:33 K3N

如何一個發光的過濾器添加到圖像

回答

相關問題