Как добавить светящийся фильтр на изображение

Question

Это эффект, который я хочу (2-й):

в фотошопе

1) дубликат слоя
2) уменьшить экспозицию нового слоя
3) добавить размытие
4) Режим наложения линейного уклонения (добавить)

программист, которого я знал, давно достиг этого эффекта, он никогда не говорил, как это делать с кодом, но давал мне инструкции, чтобы добиться того же в фотошопе.

Это было какое-то время, и я начал изучать web dev для себя, и этот эффект вызывает у меня внимание (и да, я потерял все возможные контакты с этим человеком)

сначала я думал, что это было достигнуто с помощью эффектов фильтра CSS https://www.w3schools.com/cssref/css3_pr_filter.asp

однако, несмотря на то, что он содержит размытие (%), я не могу найти способ добиться экспозиции или, что еще хуже, режима линейного наложения dodge.

Кто-нибудь знает, как на земле был сделан этот фильтр? Я предполагаю, что он не использовал CSS и вместо этого сделал это с помощью JavaScript.

Любая помощь приветствуется.

редактировать: о, вы были правы, он просто играл с этими значениями, получил хороший фильтр, но продолжит играть с ними! благодарю вас

Answer 1

Вы можете использовать различные приемы, когда вы размываете одну версию и комбинируете ее поверх оригинала, используя аддитивное смешивание.

Вот один пример использования изображения в качестве фонового изображения, где элемент after наследует изображение, добавляет размытость и композитность, используя смешивание смешивания и lighten (lighter AKA "add" AKA "linear-dodge", также можно использовать):

div {
  background:url(https://stackru.com/images/bf10f641c552006634baf5a506b70a393b0dcc9e.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 вместо, но так как не все браузеры поддерживают новый filter Свойство 2D-контекста может потребоваться размыть вручную (также добавлена ​​яркость в демонстрацию ниже).

var img = new Image; img.onload = draw; img.src = "https://stackru.com/images/bf10f641c552006634baf5a506b70a393b0dcc9e.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>