p5.js：アップロードした画像にフィルタを追加する

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