如何为图像添加发光滤镜

Question

这是我想要的效果（第二个）：

在photoshop中

1）复制层
2）减少新层的曝光（3）增加模糊
    4）混合模式线性闪避（添加）

我认识的一个程序员很久以前就已经实现了这个效果，他从来没有告诉我如何使用代码，但是给了我在photoshop中实现相同功能的指示

它已经有一段时间了，并开始为我自己学习网络开发，这种效果引起了我的注意（是的，失去了与这个人的所有可能的联系）

起初我认为这是通过css过滤效果https://www.w3schools.com/cssref/css3_pr_filter.asp

实现的

然而，当它包含模糊（％）时，我似乎无法找到实现展示的方法，甚至更糟糕的是线性闪避混合模式。

有谁知道这个过滤器是如何在地球上制造的？我猜他没有使用CSS而是用javascript做了。

感谢任何帮助。

编辑：哦，你是对的，它只是玩这些值，有一个很好的过滤器，但会继续玩它们！谢谢

Answer 1

您可以使用各种技术模糊一个版本，并使用添加剂混合将其复合到原始版本之上。

这是一个使用图像作为背景图像的示例，其中after元素继承图像，使用混合混合和lighten添加模糊和复合（lighter AKA“添加”AKA“线性闪避“，也可以使用）：

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>

使用canvas元素可以实现相同，但由于并非所有浏览器都支持2D上下文中的新filter属性，因此您可能需要手动模糊（也为下面的演示添加了亮度）。 / p>

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>