Javascript p5.js：向上传的图像添加过滤器

我想在上传的图像中添加灰色过滤器。但是使用img.filter（灰色，0.3）不起作用。我知道img在这里是一个p5元素，有没有办法只选择图像源并为上传的图像添加过滤器

var-img，画布；
函数设置（）{
var uploadBtn=createFileInput（imageUpload）；
canvas=createCanvas（500400）；
}
函数imageUpload（文件）{
img=loadImage（file.data，function（））{
图像（img，0,0，宽度，高度）；
图像过滤器（灰色，0.5）；
})
}

---

这是因为您在显示图像后应用了过滤器。当调用

imageUpload（）

函数时，

图像（img，0,0，宽度，高度）执行后，
img
图像显示在页面上，但是这是静态的，它不会像在
draw（）中一样更新，因此在显示图像后应用图像过滤器不会改变任何内容（图像不会更新，因为它是静态的）。如果您在
draw（）
中编写了完全相同的代码，它将起作用，因为它会被重复调用。要解决此问题，只需在显示图像之前应用灰色过滤器：


var-img，画布；
函数设置（）{
var uploadBtn=createFileInput（imageUpload）；
canvas=createCanvas（500400）；
}
函数imageUpload（文件）{
img=loadImage（file.data，function（））{
图像过滤器（灰色，0.5）；
图像（img，0,0，宽度，高度）；
})        
}

我想稍微改写一下你的答案：这不是因为
imageUpload（）
只调用了一次。这是因为OP在绘制图像后应用了过滤器。否则，这就是正确答案。是的，我也提到了这一点，我这样说的目的是将其与被反复调用的
draw（）
进行对比，因此OP编写的内容将在
draw（）
中实际起作用，我将编辑我的帖子以澄清这一点，谢谢！在图像也工作后仅添加过滤器-图像（img，0,0，宽度，高度）；过滤器（阈值，0.5）感谢您的回答。