javascript - 如何为图像添加发光滤镜

Question

这是我想要的效果(第二个):

在 Photoshop 中

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

我认识的一个程序员很久以前就实现了这种效果，他从来没有告诉我如何用代码来实现，而是给了我在 photoshop 中实现同样效果的说明

已经有一段时间了，我开始自己学习网络开发，这种影响引起了我的注意(是的，与此人失去了所有可能的联系)

一开始我以为这是用css滤镜效果实现的https://www.w3schools.com/cssref/css3_pr_filter.asp

然而，虽然它包含模糊 (%)，但我似乎无法找到一种方法来实现阐述，甚至更糟糕的是线性闪避混合模式。

有谁知道这个过滤器到底是怎么做出来的？我猜他没有使用 css，而是使用 javascript。

感谢任何帮助。

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

Answer 1

您可以使用各种技术，先模糊一个版本，然后使用加法混合将其合成到原始版本之上。

这是一个使用图像作为背景图像的示例，其中 after 元素继承图像，使用混合混合和 lighten(lighter 又名“添加”添加模糊和合成又名“线性闪避”，也可以使用):

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 属性，您可能需要手动模糊(也为下面的演示添加了亮度) ).

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>