如何一个发光的过滤器添加到图像

这是我想要的效果（第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

如何一个发光的过滤器添加到图像

回答

相关问题