Изображения и фотографии · Редактор изображений и рисунков в браузере
Как работает обрезка в графическом редакторе браузера: холст и пиксели
· Как это работает
редактирование изображений холст обработка браузера
Обрезка выглядит тривиально, но редактор браузера должен декодировать файл, скопировать прямоугольник пикселей на холст и закодировать совершенно новый файл. В этом посте рассматривается каждый шаг и объясняется, что меняется, а что остается неизменным.
Почему обрезанная фотография — это новый файл, а не обрезанный старый — обрезка не может просто удалить байты из JPEG или PNG, поэтому редактор декодирует и перекодирует
JPEG хранит сжатые данные изображения, а не один независимо удаляемый диапазон байтов на видимую строку. Обрезание байтов с его конца приведет к повреждению файла, а не к обрезке фотографии. Поэтому редактор браузера декодирует изображение, выбирает прямоугольник и создает новый закодированный файл. Оригинал останется на вашем диске. Если вам нужно обратимое редактирование, сохраните исходный код и координаты выделения: экспортированная обрезка не содержит недостающих пикселей.
Декодирование изображения в растровое изображение — как браузер превращает сжатые байты в сетку ширины × высоты из RGBA пикселей, прежде чем что-либо можно будет выбрать.
Браузер преобразует сжатые JPEG, PNG или WebP в растровое изображение с образцами ширины × высоты. Изображение 4000×3000 представляет собой двенадцать миллионов пикселей без обрезки, и несколько байтов на пиксель могут сделать его объем в памяти намного больше, чем файл на диске. ToolAcre проверяет ограничения изображения и холста перед выделением очень больших рабочих пространств. То, что вы видите на экране, можно увеличить до размера окна просмотра; прямоугольник обрезки все равно должен быть сопоставлен с координатами изображения перед копированием пикселей.
Выбор прямоугольника: координаты источника и назначения — как drawImage копирует выбранную область на холст целевого размера и что означает округление до целых пикселей
Прямоугольник — это начало координат (x,y) плюс ширина и высота, измеренные в исходных пикселях. ToolAcre ограничивает этот прямоугольник границами документа и обрезает каждый видимый слой, а не только снимок экрана составного предварительного просмотра. Для каждого слоя он создает целевой холст и вызывает drawImage с девятью аргументами: исходный холст, исходный прямоугольник, начало координат и размер назначения. При равных размерах источника и назначения пиксели выбираются без изменения размера. Позиции дробного указателя округляются или фиксируются до представимых пикселей холста.
Кодирование результата обратно в файл: почему этап экспорта определяет формат и качество и почему сама обрезка является точной, а кодирование может быть неточным.
Экспорт — это отдельная операция от сбора урожая. Отредактированный холст может быть закодирован как PNG, JPEG или WebP в зависимости от опций и поддержки браузера. PNG может сохранять пиксели, переданные в его кодер без потерь; JPEG упускает некоторые детали, даже если прямоугольник был выбран точно, а прозрачность требует намеренного фона при использовании формата без альфы. В новом файле также могут отсутствовать исходные метаданные или информация о цвете, поэтому никогда не описывайте его как побайтовое подмножество оригинала.
Рабочий пример: обрезка фотографии 4000×3000 до баннера 1600×900 — с учетом подсчета пикселей посредством декодирования, копирования и экспорта.
Для блоггера с фотографией 4000×3000 центрированный баннер 1600×900 начинается с x=1200 и y=1050. drawImage копирует столбцы с 1200 по 2799 и строки с 1050 по 1949 в вывод 1600×900: 1.44 миллионов пикселей вместо двенадцати миллионов. Если вместо этого вы попросите редактора уменьшить полную фотографию до 1600×900, вы измените ее соотношение сторон и выполните повторную выборку, а не обрежете эту фотографию. На телефоне с ограниченной памятью редактор может сначала уменьшить очень большой ввод, поэтому проверьте отображаемые размеры, прежде чем повторять эти координаты.
Что экспортируемый урожай не может восстановить по сравнению с исходной картинкой
Это не обрезка блока JPEG без потерь: приложение рисует пиксели и экспортирует новый контейнер. Экспортированный файл 1600×900 также не может восстановить удаленные поля после закрытия оригинала. Документ для многоуровневого редактирования снова отличается: обрезка действует на слои документа, а экспорт объединяет их в загруженное изображение. Для конфиденциального материала обрезать поля безопаснее, чем просто рисовать непрозрачное наложение, но проверьте экспортированные пиксели и сохраните исходные данные в тайне.
Вывод: точные пиксели, новый контейнер — почему обрезка в браузере является точной и как редактор изображений и рисунков в браузере выполняет ее без загрузки файла
Обрезка браузера точно определяет, какие декодированные пиксели следует сохранить, а выбранный кодировщик контролирует загруженный файл. Редактор изображений и рисунков в браузере выполняет оба шага на вашем устройстве: загружает изображение, выбирает прямоугольник, применяет обрезку и экспортирует. Сети не нужны байты фотографий ни для одного из этапов, но ресурсы сайта и раскрытые запросы AdSense/analytics не следует путать с загрузкой файлов в DevTools.