Основы обработки изображений Web Worker

By Technical specialist

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

Результатом не является «бесплатная фоновая обработка». То же устройство по-прежнему выполняет вычисления и использует память. Архитектурное преимущество заключается в разделении: тяжелая операция модели с меньшей вероятностью будет блокировать каждый ответ интерфейса во время ее выполнения.

Главный поток имеет задание пользовательского интерфейса

Страница браузера обычно запускает JavaScript в основном потоке. Этот поток также координирует макет, рисование и ввод. Если его занимает один длинный расчет, клики могут задерживаться, анимация может остановиться, а браузер может предупредить, что страница не отвечает.

У редактора изображений есть множество обязанностей в основном потоке еще до начала вывода:

получить выбор файла, вставить или удалить;
декодировать и отображать изображение;
обновлять состояния прогресса и ошибок;
нарисовать холст предварительного просмотра;
управлять движением кисти «Добавить» и «Стереть»;
подготовить действия по загрузке или буферу обмена.

Если поместить численную работу модели сегментации в один поток, эти задачи будут конкурировать напрямую. Рабочий создает более четкую границу.

Граница на основе сообщений

Редактор и рабочий не используют общие переменные. Они общаются, отправляя сообщения. Упрощенный поток выглядит так:

Редактор создает или повторно использует работника.
Он просит работника инициализировать среду выполнения и модель вывода.
Он подготавливает данные изображения и отправляет запрос на вывод.
Рабочий преобразует данные в ожидаемые входные данные модели.
Рабочий запускает модель и выдает значения маски.
Он отправляет маску или данные результата обратно.
Редактор объединяет предварительный просмотр и позволяет его уточнить или экспортировать.

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

Копирование и передача данных изображения

Отправка небольшого текстового сообщения обходится дешево. Отправка миллионов значений пикселей может оказаться дорогостоящей, если браузеру придется копировать весь буфер. Вместо этого веб-API могут передавать право собственности на определенные двоичные буферы. Перенесенный буфер становится доступным получателю без сохранения полезного дубликата на стороне отправителя.

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

Не каждая реализация использует перенос в одних и тех же местах. Общий урок заключается в том, что разделение потоков не приводит к исчезновению перемещения данных. Размеры изображения, размер буфера и количество преобразований по-прежнему влияют на задержку и объем памяти.

Что Easy Background Remover помещает в работника

Easy Background Remover использует Web Worker со средой выполнения вывода браузера для сегментации на устройстве. Тяжелый автоматический этап вырезания производит маску. Затем редактор отображает объединенный результат и поддерживает уточнение кисти холста процессором.

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

Это также делает понятным требование о локальной обработке. Отправка пикселей со страницы расширения собственному рабочему элементу — это взаимодействие внутри среды браузера, а не загрузка в API удаленного выреза. Первый сеанс может отдельно загрузить ресурс модели многократного использования; см. Почему при первом запуске загружается модель.

Рабочий не делает вычисления мгновенными

Рабочие улучшают скорость реагирования, а не необработанные возможности устройства. Модель по-прежнему потребляет ресурсы ЦП, графического процессора или других ресурсов времени выполнения в зависимости от того, что может предоставить браузер. Большой ввод может занять больше времени и потребовать больше памяти, чем маленький.

Остается несколько ограничений:

инициализация модели имеет реальную стоимость;
пиксельные буферы занимают память с обеих сторон при копировании;
изменение размера и преобразование формата требуют времени;
устройствам с небольшим объемом памяти могут быть проблемы с большими изображениями;
большее количество работников может усилить разногласия, а не уменьшить их;
Обновления экспорта и холста по-прежнему могут включать основной поток.

Запуск пяти обработчиков вывода для пяти изображений не происходит автоматически в пять раз быстрее. Рабочие используют одну и ту же машину. Параллельные задания могут конкурировать за пропускную способность памяти и ресурсы выполнения, в то время как каждый экземпляр модели может нести свою собственную стоимость памяти.

Отчеты о ходе работы являются совместными

Работник может отправлять сообщения о состоянии, но он не знает автоматически, какой процент прогресса будет считаться точным. Загрузка модели, инициализация среды выполнения, подготовка ввода, вывод, преобразование маски и предварительный рендеринг — это отдельные этапы с разным временем.

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

Полезный пользовательский интерфейс прогресса по возможности называет этап: подготовка модели, обработка изображения или построение результата. Он также обрабатывает сбои и отмены вместо того, чтобы оставлять счетчик без объяснения причин.

Отмена — это больше, чем просто скрытие счетчика

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

Завершение рабочего процесса имеет решающее значение, но оно отбрасывает его инициализированное состояние. Для следующего задания может потребоваться повторная загрузка и инициализация модели. Для короткой операции пометить результат как устаревший может быть дешевле, чем снести все.

Правильный выбор зависит от нехватки памяти, продолжительности операции и возможностей среды выполнения. С точки зрения пользователя, важным правилом является то, что устаревшая работа не должна перезаписывать текущие изменения.

Ошибки тоже должны пересекать границы

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

Хорошая обработка ошибок отличает как минимум:

актив модели недоступен;
инициализация модели не удалась;
не удалось декодировать изображение или подготовить ввод;
вывод не удался;
рабочий неожиданно остановился;
результат больше не принадлежит текущему запросу.

Это более действенно, чем обычное «что-то пошло не так», особенно когда при первом запуске и обычной обработке изображений используются разные способы устранения проблемы.

Выходные данные работника по-прежнему являются только первой маской

Архитектура потоков сама по себе не улучшает неоднозначное преимущество. Работник может вернуть технически годную маску, в которой все еще отсутствует мех, прозрачный материал, узкие лямки или желаемая тень. Это вопросы сегментации и намерений.

Работа редактора возобновляется после вывода: масштабируйте маску в рабочую систему координат, скомпонуйте предварительный просмотр, позвольте пользователю уточнить его и экспортируйте текущее состояние. Разрешение маски и размер предварительного просмотра объясняет, почему не следует путать эти системы координат.

Краткая мысленная модель

Представьте себе работника как местного специалиста за окном сообщений:

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

Чтобы увидеть сами пиксели модели, перейдите к разделу Что видит модель выреза на устройстве. Полный практический обзор см. в разделе Как работает локальное удаление фона.