2

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

在 Photoshop 中

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

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

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

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

但是，虽然它包含模糊（％），但我似乎无法找到一种方法来实现曝光或更糟的是线性减淡混合模式。

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

任何帮助表示赞赏。

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

4

1 回答 1

4

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

这是一个使用图像作为背景图像的示例，其中后元素继承图像，使用混合混合添加模糊和合成lighten（lighter也可以使用 AKA “add” AKA “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>

使用 canvas 元素也可以实现相同的效果，但由于并非所有浏览器都支持filter2D 上下文中的新属性，因此您可能必须手动进行模糊处理（也为下面的演示添加了亮度）。

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-15T06:00:33.397 回答