Изображения и фотографии · Изменение размера изображений в социальных сетях
Как работает изменение размера изображения в браузере: Canvas, drawImage и повторная выборка
· Как это работает
изменение размера изображения холст обработка браузера
Браузер может декодировать фотографию, нарисовать ее на холсте в новом размере и закодировать результат, и все это без использования сервера. Этот пост следует за этим конвейером, объясняет, где качество выигрывает или теряется, и показывает, почему единственным ограничением размера является память вашего устройства.
Нет загрузки, нет сервера, размер по-прежнему изменяется — конкретный вопрос о том, где происходит работа, когда страница сжимает 20-мегапиксельную фотографию
Фотография может стать портретом 1080 от 1350 без посещения сервера обработки изображений. Social Image Resizer получает файл из средства выбора браузера, проверяет его тип и размер MIME и вызывает createImageBitmap. Это декодированное растровое изображение остается источником для каждого выбранного вывода, поэтому один локальный объект может питать несколько холстов разной формы.
Видимый предварительный просмотр — это не окончательный экспорт, скрытый за сетевым запросом. Это уменьшенный рендеринг холста с тем же состоянием кадрирования: целевое соотношение, масштабирование, смещение, режим подгонки и фон. Экспорт позже повторяет визуализацию с заданными размерами, кодирует Blob и передает Blob элементам управления загрузкой на странице.
Декодирование является локальным, но этот инструмент также применяет ограничение ввода 40 MB.
В плане говорится, что память устройства является единственной практической границей, но поставляемый путь ввода также имеет явное ограничение на файл 40 MB. JPEG, PNG и WebP принимаются; другие типы отклоняются перед декодированием. После этого createImageBitmap просит браузер преобразовать байты сжатого файла в ширину, высоту и декодированные пиксели, используемые холстом.
Декодированные пиксели могут занимать гораздо больше памяти, чем сжатый файл, и каждый выходной холст требует своего собственного выделения. Поэтому рендерер вызывает общий предохранитель пиксельного бюджета перед созданием холста. Это второе ограничение, ориентированное на устройство, а не разрешение обещать, что каждый файл ниже 40 MB будет соответствовать всем запрошенным выводам на каждой машине.
drawImage масштабирует позиционированное полное растровое изображение, в то время как выходные клипы холста переполняются
ToolAcre не вычисляет исходный прямоугольник обрезки и не передает в drawImage восемь аргументов источника и назначения. Он вычисляет масштаб на основе исходных и целевых размеров, позиционирует все масштабированное растровое изображение и рисует его на холсте, края которого отсекают любое переполнение. В режиме обложки эта обрезка является обрезкой; в режиме содержания все растровое изображение остается видимым.
Это различие имеет значение, поскольку обрезка и изменение размера не являются синонимами. Изменение размера изменяет размеры, в которых производится выборка растрового изображения. Обрезка удаляет все, что находится за пределами конечного выходного кадра. Здесь один вызов drawImage может участвовать в обоих эффектах, но обрезка производится за счет геометрии кадра и обрезки, а не путем предварительного перезаписи исходного файла.
Передискретизация под капотом — настройки сглаживания, какие действия требует от браузера подсказка о «высоком качестве» и почему результаты немного различаются в разных браузерах
Перед рисованием средство визуализации включает imageSmoothingEnabled и устанавливает для imageSmoothingQuality высокое значение. Это элементы управления холстом браузера, а не запрос именованного ядра Lanczos, бикубического или другого ядра. Реализация не может обещать идентичные образцы для всех движков, поскольку API предоставляет подсказку о качестве, а не точную таблицу коэффициентов браузера.
Полезное сравнение сохраняет исходные, выходные размеры и браузер фиксированными, а затем проверяет диагональные края, тонкие линии и повторяющиеся текстуры. Если другой браузер немного отличается, это не означает, что целевое соотношение изменилось. Это означает, что один и тот же геометрический запрос прошел через другую реализацию холста, и именно поэтому в статье избегаются придуманные проценты производительности или качества.
Кодирование вывода — преобразование холста обратно в закодированный файл изображения и предложение его для загрузки.
Холст экспорта становится BLOB-объектом через OffscreenCanvas.convertToBlob, если этот метод существует, или HTMLCanvasElement.toBlob в противном случае. Пользователь выбирает JPEG, PNG или WebP. Значение качества передается кодировщику, хотя PNG не использует контроль качества с потерями, как это делают JPEG и WebP. Результирующее количество байтов измеряется, а не оценивается.
Для нескольких выбранных целей инструмент последовательно создает каждый Blob, отображает его реальные размеры и измеренный размер, а также может упаковывать уже закодированные файлы в ZIP. Хранилище ZIP здесь не улучшает сжатие изображений; в содержании отмечается, что эти форматы уже сжаты. Отдельные загрузки и архив происходят из локально созданных байтов.
Эта реализация выполняет экспортную работу в основном потоке, а не в веб-воркере.
В книге сказано, что тяжелая работа обычно выполняется в Web Worker, но это приложение импортирует функции обрезки и рендеринга непосредственно в main.js и циклически перебирает там цели. На проверяемом пути не создается ни один работник. Страница по-прежнему может оставаться пригодной для использования в обычных задачах, но необходимо учитывать скорость реагирования, а не приписывать ее отсутствующей архитектуре.
Сетевая изоляция подтверждается двумя видами доказательств. Базовые тесты устанавливают сетевую защиту и кадрируют каждую предустановку без попытки, в то время как запись продукта отмечает локальную обработку. Проверка сетевой панели во время выполнения может добавить доказательства развертывания. Он должен отличать загрузку изображений от обычных ресурсов страницы или раскрытой аналитики, а не утверждать, что вся страница не отправляет никаких запросов.
Что здесь не распространяется — GPU библиотеки изменения размера и конвейеры обработки изображений на стороне сервера.
Этот маршрут намеренно построен на примитивах браузера, а не на библиотеке GPU или удаленном медиаконвейере. Он не предоставляет выбираемое ядро повторной выборки, альтернативные алгоритмы тестирования и не обещает ускоренной пакетной обработки. Одно исходное изображение дает несколько урожая; многие несвязанные исходные файлы принадлежат другому рабочему процессу.
Эти исключения делают обещание проверяемым. Код обеспечивает проверку файлов, декодирование растровых изображений, арифметическое кадрирование, рисование на холсте, кодирование Blob и сборку загрузки. Это не доказывает, как ферма серверов будет изменять размер одних и тех же пикселей или какой GPU путь браузер может выбрать внутри себя. Претензии ограничиваются используемыми наблюдаемыми веб-API.
Вывод: в вашем браузере уже есть встроенный инструмент изменения размера — Social Image Resizer управляет им за вас, обрезая и масштабируя в соответствии с соотношением сторон платформы без загрузки файла.
Браузер уже предоставляет основные операции, но полезные результаты зависят от правильной геометрии вокруг них. Social Image Resizer выбирает максимальный масштаб для укрытия, минимальный масштаб для сдерживания, фиксирует движение, отдельно просматривает указания по безопасной зоне и экспортирует с точными целевыми размерами. Эта оркестровка превращает низкоуровневый рисунок API в повторяемый рабочий процесс с социальными активами.
Протестируйте конвейер с исходным изображением, а не с ранее уменьшенной копией. Выберите текущую предустановку инструмента или собственное соотношение сторон, переместите объект, экспортируйте его один раз и проверьте загруженные размеры. Доказательством является полученный вами локальный файл и путь к коду, который его создал, а не утверждение, что каждый браузер использует идентичный скрытый ресэмплер.