Блог

Я играю с некоторыми фильтрами изображений с использованием Canvas после прочтения этого поста this post. По сути, он перемещается по всем пикселям и обновляет значение до чего-то.

Что я хочу сделать сейчас, так это отрегулировать яркость изображения, используя диапазон ввода.
Итак, я прикрепил обработчик событий onChange и вызываю функцию для обновления холста каждый раз, когда пользователь перемещает ползунок.

Очевидно, что это сильно замедляет работу страницы, потому что, когда пользователь перемещает ползунок с 10 на 40, он вызывает функцию 30 раз!. Я попытался использовать такой флаг:

 if (!myFlag) {
 myFlag = true;
 ...call the function...
 myFlag = false;
}
  

Но это не совсем то, что я хочу, потому что я хочу видеть это в «реальном времени» (как в Photoshop)

Кто-нибудь может дать мне подсказку, чтобы решить эту проблему? Может быть, мне следует использовать другое событие или, возможно, совершенно другой подход к обработке ImageData.

вероятно, это будет работать не так хорошо, как вы ожидаете, но попробуйте добавить тайм-аут

 var myFlag = false;
var filterTimeout;
slider.onChange = function() {
    if (!myFlag) {
        myFlag = true;
        clearTimeout(filterTimeout);
        filterTimeout = setTimeout(function() {
            // apply the filter hear

            myFlag = false;
        }, 1);
    }
}
  

Если вы хотите увидеть его в режиме «реального времени», вам нужно вызвать функцию, поскольку ползунок обновляет свое значение.

Единственный другой способ — иметь кнопку «Применить«, которая преобразует изображения, на которые установлен ползунок (или тайм-аут).