Удаление фона — это задача сегментации: нужно отделить главный объект от остального изображения и построить маску. В браузере её можно считать локально, без загрузки фото на сервер. Но качество зависит от модели и типа снимка.

Два подхода

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

Нейросеть. Модель смотрит на изображение целиком и предсказывает вероятность «объект/фон» для каждого пикселя. Она справляется с градиентами и сложными сценами, но требует загрузки весов и вычислений.

Как устроен U²-Net

U²-Net — сеть для выделения значимого объекта. Она строит несколько карт на разных масштабах и объединяет их. На вход обычно подаётся квадрат 320×320, на выходе — маска 320×320. Маску растягивают до размера исходника и используют как альфа-канал.

В браузере модель исполняет ONNX Runtime Web через WebAssembly. Это не требует сервера, но 10–15 МБ рантайма и весов нужно один раз скачать. Поэтому загрузку лучше запускать по кнопке, а не при открытии страницы.

Почему волосы и мех страдают

Маска 320×320 не хранит мелкие детали. Тонкие пряди занимают доли пикселя, и модель либо относит их к фону, либо делает полупрозрачными пятнами. Полноразмерные модели и alpha matting работают лучше, но весят сотни мегабайт.

Практический компромисс: сглаживание края 1–2 px и ручная обрезка. Для карточек товаров и логотипов этого достаточно; для портретов с сложной причёской — нет.

Что происходит с прозрачностью

Результат собирается на canvas: исходник рисуется, затем к нему применяется маска через destination-in. Прозрачные пиксели показывают шахматку, а не белый фон. Если положить результат поверх исходного холста, визуально ничего не изменится — это частая ошибка при реализации.

Когда лучше цветовое удаление

  • логотип или иконка на однотонном фоне;
  • скан документа;
  • товар на белом или сером;
  • скриншот с ровным фоном.

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

Приватность и производительность

Файл не отправляется на сервер: браузер читает его локально. Но обработка больших фото занимает память. Уменьшайте изображение до 2000–2400 px по длинной стороне, если исходник огромный. На телефоне инференс может занять 5–15 секунд.

Коротко

  • однотонный фон — цветовой метод, сложный — нейросеть;
  • U²-Net работает с маской 320×320;
  • волосы и мех — слабое место компактных моделей;
  • прозрачность нельзя показывать поверх исходника;
  • локальная обработка сохраняет приватность.