p5.js: 为上传的图片添加滤镜

Question

我想为上传的 image.But 添加灰色过滤器，使用 img.filter(GRAY,0.3) 不起作用。我知道 img 在这里是一个 p5 元素，有没有什么办法可以 select 仅图像源并为上传的图像添加过滤器？

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.When后应用滤镜imageUpload()函数被调用，image(img,0,0,width,height);被执行，页面显示img图像，但是那是 static，它不会像在 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>

p5.js: 为上传的图片添加滤镜

p5.js: Add filter to uploaded image

javascript

processing

p5.js

imagefilter