Javascript 使用鼠标XY更改图像饱和度

是否可以根据鼠标光标的x、y坐标将图像饱和度从0%更改为100%

因此，当光标位于网页的右上角时，右上角的图像将完全饱和，而左下角的图像将处于0%饱和状态

根据鼠标坐标，将中间的任何图像上色到%s。
无法在网上找到任何解决方案

我正在寻找这段代码作为我目前使用的简单CSS悬停颜色的升级

---

非常感谢

编写一个JS函数，跟踪屏幕上的鼠标坐标，然后将其转换为所需的百分比

比如：

<img src="https://cdn.pixabay.com/photo/2017/05/14/14/24/grass-2312139_960_720.jpg" 
     width="300px">

<script>
  var x, y, img = $('img');

  $(document).mousemove( function( getCurrentPos ){
    x = getCurrentPos.clientX/window.innerWidth;
    y = getCurrentPos.clientY/window.innerHeight;
    $(img).css('filter', 'saturate(' + x*y*100 + ')');
  });
</script>

变量x，y，img=$（'img'）；
$（文档）.mousemove（函数（getCurrentPos）{
x=getCurrentPos.clientX/window.innerWidth；
y=getCurrentPos.clientY/window.innerHeight；
$（img.css（'filter'，'saturate（'+x*y*100+'））；
});

也许这可以帮助您>谢谢，我会试一试的