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

Question

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

＆＃13;

＆＃13;

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);
    })
    
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

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);            
    })        
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;