Размыть изображение с помощью JavaScript - PullRequest
Новая
       106

Размыть изображение с помощью JavaScript

2 голосов
/ 27 мая 2020

Я хочу сделать что-то вроде слайд-шоу, но если вы нажмете кнопку для следующего изображения, оно должно размыться до неузнаваемости, а затем следующее должно выглядеть размытым и стать резким. Проблема здесь в том, что мне пришлось бы применить размытие через JS, и мой текущий подход выглядит так: document.getElementById("no1").style.filter = "blur(3Px)";

Если я применяю размытие с помощью css, он работает нормально, но он мне нужен применять при нажатии кнопки, что не работает. Объект, который я пытаюсь размыть, - это <img>

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

Ответы [ 2 ]

2 голосов
/ 27 мая 2020 

const img = document.querySelector('img');
img.addEventListener('click', toggleBlur);

function toggleBlur() {
  this.classList.toggle('blur');
}
img { transition: filter 1s linear; }
.blur { filter: blur(30px); }
<img src="https://i.imgur.com/KjUybBD.png"></img>

У меня работает в Chrome, Firefox, Safari, последней версии Edge ...

enter image description here

0 голосов
/ 27 мая 2020

Хотя решение gman больше solid (переключение класса CSS через JS), этот простой подход с применением фильтра через JavaScript также работает: 

var btn = document.getElementById('blurBtn');
var img = document.getElementById('blurImg');

btn.addEventListener('click', addBlur)

function addBlur() {
  img.style.filter = 'blur(3px)';
}
<img id="blurImg" src="https://i.imgur.com/2fGfQua.gif">
<button type="button" id="blurBtn">Blur</button>
...