在javascript横幅中使用css模糊图像

我做了一个模糊的横幅，在鼠标移动时变得清晰起来。为此，我使用了两个图像，一个模糊，一个清晰。我想从

css

中进行模糊处理，并使用一幅图像，但当我在该图像上设置过滤器时，鼠标移动时，横幅不会变得清晰。有人能帮我吗？谢谢我尝试了很多方法来放置这个过滤器，但是没有一个能正确工作。我需要使用jpg或png而不是svg，因为这些是客户端提供给我的格式

var image=document.querySelector（'.zzz img'）；
var imageCanvas=document.createElement（'canvas'）；
var imageCanvasContext=imageCanvas.getContext（'2d'）；
var lineCanvas=document.createElement（'canvas'）；
var linecanvascoxt=lineCanvas.getContext（'2d'）；
var pointLifetime=999999999999999999999；
var点=[]；
如果（图片完整）{
start（）；
}否则{
image.onload=开始；
}
/**
*附加事件侦听器并启动效果。
*/
函数start（）{
document.addEventListener（'mousemove'，onMouseMove）；
window.addEventListener（“调整大小”，调整画布大小）；
var xxx=document.querySelector（'.banner'）；
xxx.appendChild（imageCanvas）；
调整画布的大小（）；
勾选（）；
}
/**
*记录用户的光标位置。
*
*@param{！MouseEvent}事件
*/
mouseMove函数（事件）{
var rect=document.querySelector（'.banner'）.getBoundingClientRect（）；
点。推({
时间：Date.now（），
x:event.clientX-rect.left，
y:event.clientY-rect.top
});
}
/**
*调整两个画布的大小以填充窗口。
*/
函数大小调整画布（）{
imageCanvas.width=lineCanvas.width=300；
imageCanvas.height=lineCanvas.height=250；
}
/**
*主回路，在~60hz时调用。
*/
函数tick（）{
//删除旧点
点=点。过滤器（函数（点）{
var age=Date.now（）-point.time；
返回年龄<生命周期；
});
drawLineCanvas（）；
drawImageCanvas（）；
requestAnimationFrame（勾号）；
}
/**
*使用记录的光标位置绘制直线。
*
*这条线用于遮罩原始图像。
*/
函数drawLineCanvas（）{
var最小线宽=25；
var最大线宽=100；
var线宽范围=最大线宽-最小线宽；
var最大速度=50；
lineCanvasContext.clearRect（0，0，lineCanvas.width，lineCanvas.height）；
lineCanvasContext.lineCap='round'；
lineCanvasContext.shadowBlur=30；
lineCanvasContext.shadowColor='#000'；
对于（变量i=1；i

.zzz img{
显示：无；
}
.模糊图像{
过滤器：模糊（5px）；
}
zzz先生{
位置：绝对位置；
z指数：200；
}
.横幅{
宽度：300px；
高度：250px；
溢出：隐藏；
位置：相对位置；
保证金：0自动0；
背景图像：url（'http://www.dbdesign.ro/blur/a_blur.png');
/*过滤器：模糊（5px）；
-webkit过滤器：模糊（5px）*/
/*背景图像：过滤器（url（a.png），模糊（20px））*/
/*过滤器：模糊（5px）；
-webkit过滤器：模糊（5px）*/
}
帆布{
位置：绝对位置；
z指数：999；
}

---

仍然使用canvas API的一种简单方法是使用原始图像中的填充，只填充鼠标经过的地方

现在，您可以将画布放置在经过CSS过滤的

运行代码片段，它对我有效？？可能的横幅副本正在工作，但我只想使用一个图像，而不是2个。我不能把滤镜放在背景图片上，我不认为我的帖子是重复的，我不知道其他方式可以达到这个效果