使用JavaScript模糊图像

Question

我想制作类似幻灯片的内容，但是如果您按下下一张图片的按钮，则该图片应模糊不清，直到无法识别为止，然后下一张图片应变得模糊并变得清晰。这里的问题是，我将不得不通过JS应用模糊，而我目前的方法如下所示：document.getElementById("no1").style.filter = "blur(3Px)";

如果我使用css应用模糊效果，则效果很好，但是当单击按钮时，我需要应用模糊效果，但这不起作用。我尝试模糊的对象是<img>

此外，最好知道是否存在等待条件，或者函数中的其他步骤是否会在开始之前等待模糊的过渡持续时间。

Answer 1

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中为我工作...

Answer 2

尽管gman的解决方案是一个更牢固的解决方案（通过JS切换CSS类），但是这种应用过滤器通过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>