p5.js: Filter zum hochgeladenen Bild hinzufügen

Question

Ich möchte dem hochgeladenen Bild einen Graufilter hinzufügen. Aber mit img.filter (GREY, 0.3) funktioniert das nicht. Ich weiß, dass img hier ein p5-Element ist, gibt es eine Möglichkeit, nur die Bildquelle auszuwählen und Filter zum hochgeladenen Bild hinzuzufügen?

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

Dies ist, weil Sie die Filter nach dem Anzeigen der image.When imageUpload() Funktion anwenden genannt wird, und image(img,0,0,width,height); ausgeführt wird, das img Bild auf der Seite angezeigt wird, aber das ist statische , es wird nicht aktualisiert, wie es wäre, wenn es in draw() wäre und daher die Anwendung des Bildfilters nach der Anzeige des Bildes nichts ändert (das Bild wird nicht aktualisiert, weil es statisch ist). Wenn Sie den exakt gleichen Code in draw() geschrieben haben, würde es funktionieren, weil das wiederholt aufgerufen wird. Um dies zu beheben einfach die Graufilter anwenden, bevor das Bild angezeigt wird:

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>