Javascript 模糊css中除选定区域之外的所有图像

我的要求是模糊图像，同时在选定区域保持不模糊。通过绝对定位，我在图像上放置了一个div。图像仅在此区域可见，除此区域外，所有其他图像均模糊

这是我的DOM结构

<div className="col-md-12 align-center mgb-30">
//within this area image is unblur while rest of image is blurred
<div className="venue-image-filter flex all-center color-white">
<h3 className="heading">Visible Area</h3>
</div>
<img src="https://i.picsum.photos/id/237/200/300.jpg" className="border-radius-10" alt="Venue" />
</div>

---

这里有一个小演示，演示如何做到这一点：

document.querySelector（'.image'）.addEventListener（'mousemove'，（{offsetX，offsetY，target}）=>{
const x=offsetX/target.clientWidth；
const y=offsetY/target.clientHeight；
setProperty（'--x'，`${x*100}%`）；
setProperty（'--y'，`${y*100}%`）；
});
.image{
宽度：640px；
高度：200px；
位置：相对位置；
}
.image:：之前，.image:：之后{
内容：''；
显示：块；
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
左：0；
背景图像：var（--image）；
}
.图片：：之前{
过滤器：模糊（10px）；
}
.image：：之后{
剪辑路径：圆形（20%在var（-x，50%）var（-y，50%）；
z指数：1；
}
这里有一个小演示，演示如何做到这一点：


document.querySelector（'.image'）.addEventListener（'mousemove'，（{offsetX，offsetY，target}）=>{
const x=offsetX/target.clientWidth；
const y=offsetY/target.clientHeight；
setProperty（'--x'，`${x*100}%`）；
setProperty（'--y'，`${y*100}%`）；
});
.image{
宽度：640px；
高度：200px；
位置：相对位置；
}
.image:：之前，.image:：之后{
内容：''；
显示：块；
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
左：0；
背景图像：var（--image）；
}
.图片：：之前{
过滤器：模糊（10px）；
}
.image：：之后{
剪辑路径：圆形（20%在var（-x，50%）var（-y，50%）；
z指数：1；
}
过滤器：模糊（5px）
？但它会模糊所有图像，如何为选定区域取消模糊图像？我不知道！！你在问题中没有表现出足够的能力来“瞄准”特定的图像-而且由于
.vention image filter
div中没有图像，那么我不可能猜到-我的意思是。。此选定区域图像是什么-请澄清您是如何在鼠标悬停、选择时指定选定区域的？您是否正在将某些类添加到选定区域？你的问题不够清楚。
过滤器：模糊（5px）
？但它会模糊所有图像，我如何才能为选定区域取消模糊图像？我不知道！！你在问题中没有表现出足够的能力来“瞄准”特定的图像-而且由于
.vention image filter
div中没有图像，那么我不可能猜到-我的意思是。。此选定区域图像是什么-请澄清您是如何在鼠标悬停、选择时指定选定区域的？您是否正在将某些类添加到选定区域？你的问题不够清楚。这只是一个大概的想法，你需要自己计算
剪辑路径的面积。这只是一个大概的想法，你需要自己计算
剪辑路径的面积。
.venue-image-filter
{
position:absolute;
top:50%;
left:50%;
width:300px;
height:200px;
transform:translate(-50%,-50%);
}