Блог

Главная - Вопросы по программированию - Динамический фильтр изображений с использованием события ввода холста и диапазона

Динамический фильтр изображений с использованием события ввода холста и диапазона

#javascript #canvas

#javascript #холст

Вопрос:

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

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

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

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

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

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

Ответ №1:

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

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

            myFlag = false;
        }, 1);
    }
}

Комментарии:

1. Это ужасный способ сделать это, он будет назначать новое время ожидания для каждого изменения. Вы должны очистить существующие.

2. Привет, Алекс. Спасибо, что указали. Я думал, что это будет безопасно из-за проверки флага, но я добавил clearTimeout на всякий случай.

Ответ №2:

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

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