p5.js: добавить фильтр к загруженному изображению

Я хочу добавить серый фильтр к загруженному изображению. Но использование 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>


javascript imagefilter processing p5.js
person FBR    schedule 11.03.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Это связано с тем, что вы применяете фильтр после отображения изображения. Когда вызывается функция 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>

person Ayush Seth    schedule 11.03.2017
comment
Я бы немного переформулировал ваш ответ: это не потому, что imageUpload() вызывается только один раз. Это потому, что OP применяет фильтр после того, как изображение нарисовано. В противном случае это правильный ответ. - person Kevin Workman; 11.03.2017
comment
Да, я также упомянул об этом, я хотел сказать, что это противопоставляет его draw(), который вызывается неоднократно, поэтому то, что написал ОП, действительно будет работать в draw(), я отредактирую свой пост, чтобы было ясно, спасибо! - person Ayush Seth; 11.03.2017
comment
Добавление только фильтра после изображения также сработало p5js.org/reference/#/p5/filter - изображение(img,0,0,ширина,высота); filter(THRESHOLD,0.5) Спасибо за ответ. - person FBR; 11.03.2017