p5.j​​s：将过滤器添加到上传的图片

Question

我想在上传的图片中添加灰色滤镜。但是使用img.filter（GRAY，0.3）不起作用。 我知道img在这里是p5元素，有什么办法只能选择图像源并将滤镜添加到上传的图像吗？

 var img,canvas; function setup(){ var uploadBtn = createFileInput(imageUpload); canvas=createCanvas(500,400); } function imageUpload(file){ img = loadImage(file.data,function(){ image(img,0,0,width,height); img.filter(GRAY,0.5); }) } 

 <script src="https://github.com/processing/p5.js/releases/download/0.5.7/p5.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/addons/p5.dom.min.js"></script> 

Answer 1

这是因为在显示image(img,0,0,width,height);之后应用了滤镜。当调用imageUpload()函数，并且image(img,0,0,width,height); 执行后， img图像显示在页面上，但是这是静态的 ，它不会像在draw()中那样更新，因此在显示图像后应用图像滤镜不会改变任何内容（图像不会更新，因为它是静态的）。 如果您在draw()编写了完全相同的代码，那么它将起作用，因为它会被重复调用。 要解决此问题，只需在显示图像之前应用灰色滤镜即可：

 var img,canvas; function setup(){ var uploadBtn = createFileInput(imageUpload); canvas=createCanvas(500,400); } function imageUpload(file){ img = loadImage(file.data,function(){ img.filter(GRAY,0.5); image(img,0,0,width,height); }) } 

 <script src="https://github.com/processing/p5.js/releases/download/0.5.7/p5.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/addons/p5.dom.min.js"></script>