Javascript 使用滑块制作图像灰度JS/HTML/CSS

我正试图使用滑块，使图像灰色只用纯JavaScript，HTML和CSS

用户上传一个文件，然后将其放到画布上。然后，我希望用户能够移动范围输入上的滑块，并根据范围的值，它将改变图像接近黑白的程度。 任何帮助都将不胜感激

让imageLoader=document.getElementById（'imgFile'）；
imageLoader.addEventListener（'change'，handleImage，false）；
让canvas=document.getElementById（'imgCanvas'）；
设ctx=canvas.getContext（'2d'）；
函数handleImage（e）{
let reader=new FileReader（）；
reader.onload=函数（事件）{
设img=新图像（）；
img.onload=函数（）{
canvas.width=img.width；
canvas.height=img.height；
ctx.drawImage（img，0,0）；
}
img.src=event.target.result；
}
reader.readAsDataURL（e.target.files[0]）；
}

选择图像：
编辑灰度：

进行灰度缩放的代码在哪里？这是我不确定的，您是否可以定义滑块在您的案例中的确切位置？抱歉，滑块是范围输入类型似乎您应该搜索如何使用画布进行图像灰度化。

var slider = document.getElementById("greyPic");
var pic = document.getElementById("imgCanvas");

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
    var value = this.value;
    //add grayscale based on the value of the slider 
    pic.style.filter= `grayscale(${value}%)`;
}