Что произошло

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

«Через океан» здесь — имя самой отправки. Файл уезжает на чужой сервер, хотя правка могла остаться на машине, где снимок уже открыт.

Дальше — знакомая витрина «онлайн-конвертера». Надпись зовёт загрузить картинку в «движок», полоса ожидания крутится около 30 секунд, затем сообщение: бесплатная попытка за месяц уже потрачена, высокая чёткость — за $19,99 в месяц.

HelpMyIMG собран как ответ на эту витрину. Обрезка на холсте, сжатие, кодирование WebP и сегментация (ею обычно вырезают фон) остаются в песочнице вкладки. Сеть для самой операции не нужна.

Пиксели считает не основной поток страницы. Картинка передаётся в Web Worker, а рисование идёт на OffscreenCanvas, чтобы вкладка не замирала, пока считается файл.

Фрагмент из заметки выглядит так. Качество по умолчанию — 0.82. В комментарии к коду автор пишет про уменьшение размера на 70–85% примерно за 40 мс и без сетевого обмена. Это оценка шага кодирования, не цифра из сравнительной таблицы ниже.

export async function compressImageWorker(imageBitmap, quality = 0.82) {
  const canvas = new OffscreenCanvas(imageBitmap.width, imageBitmap.height);
  const ctx = canvas.getContext('2d', { willReadFrequently: true });
  ctx.drawImage(imageBitmap, 0, 0);
  const blob = await canvas.convertToBlob({ type: 'image/webp', quality });
  return blob;
}

Шаг читается без знания API. Функция получает уже готовый растровый снимок ImageBitmap. Создаёт OffscreenCanvas того же размера, рисует снимок и просит холст отдать файл WebP с заданным качеством. Наружу уходит готовый файл, не адрес на сервере.

Флаг willReadFrequently стоит в вызове контекста ровно так, как его написал автор. Заметка не объясняет, зачем он включён, и не прикладывает отдельный замер «с флагом и без».

Отдельно автор утверждает, что базовые операции — сегментация, обрезка, сжатие, кодирование WebP — могут идти в памяти браузера на современных WebAssembly и Canvas со скоростью 60 кадров в секунду. Заметка не прикладывает к этой фразе отдельный замер устройства.

Сравнение, которое он публикует целиком, такое:

В одной и той же заметке рядом стоят две цифры чужого тарифа и два лимита. В тексте витрины — одна бесплатная попытка за месяц и $19,99. В таблице — 50 попыток на бесплатном пороге и $19,90 в месяц. Это не два разных замера скорости, а два места, где автор называет цену чужого сервиса. Свою строку он помечает как $0.

Живой пример он ставит на страницу сервиса.

Почему это важно

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

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

В таблице это показано как полезный груз: 12 МБ против 0 КБ. Ноль килобайт здесь значит, что снимок не покидает машину, а не что сервис умеет что-то ещё, о чём заметка молчит.

Разница 120 мс и 4,2 с — это локальный расчёт против полного цикла запроса. К облачной цифре добавляются очередь, лимит попыток и подписка. В тексте витрины фигурирует $19,99 в месяц, в таблице сравнения — $19,90. Обе цифры стоят у автора как цена чужого сервиса; $0 он оставляет за своим.

Фоновый работник нужен не ради красивого имени API. Пока пиксели считаются на OffscreenCanvas внутри Web Worker, основной поток страницы остаётся отзывчивым. Пользователь двигает страницу, а не смотрит на притворную полосу в 30 секунд.

Ограничение честное и оно в той же таблице: «без лимита» упирается в железо. Слабый ноутбук не становится облачным кластером от того, что запрос не ушёл в сеть.

На практике

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

Авторский набросок — не полный продукт, а форма шага. Её можно сверить со своей страницей.

1. Для обрезки, сжатия, WebP и вырезания фона через сегментацию сначала проверьте, хватает ли памяти вкладки, и только потом думайте о загрузке на сервер.
2. Передайте ImageBitmap в Web Worker и рисуйте на OffscreenCanvas, а не на холсте страницы.
3. Кодируйте через convertToBlob с типом image/webp. В примере качество по умолчанию — 0.82; комментарий обещает минус 70–85% размера примерно за 40 мс без сети.
4. Сверяйте ожидания с опубликованной таблицей: около 120 мс локально против 4,2 с полного цикла HTTP, 0 КБ против 12 МБ, $0 против подписки около $19,90–$19,99 в месяц.
5. Помните про потолок железа: в таблице нет безлимитного облака, есть граница компьютера пользователя.
6. Не переносите в продукт фразу про 60 кадров в секунду как свой замер — в заметке это заявление о возможности, без отдельной методики.

Итог

Белое поле на скане не стоит билета через океан. В этой заметке обрезка, сжатие, WebP и сегментация остаются в памяти вкладки: OffscreenCanvas в Web Worker, около 120 мс против 4,2 с, файл на 70–85% легче, цена $0 против платного облака.

Пока снимок не уезжает, чужой сервер его не видит. Дальше предел ставит уже не тариф, а машина, на которой открыта вкладка.