Изображения и фотографии · Редактор изображений и рисунков в браузере
Как браузеры обрабатывают ориентацию EXIF при редактировании фотографии на телефоне
· Как это работает
редактирование изображений холст обработка браузера
Телефоны часто сохраняют фотографии боком и полагаются на крошечную метку ориентации, сообщающую зрителям, как их повернуть. В этом посте объясняется, что это за тег, как браузер применяет его во время декодирования и почему он больше не нужен отредактированному экспорту.
Фотография, которая находится вертикально на вашем телефоне и в других местах боком — конкретный симптом и восьмизначный тег ориентации EXIF позади него.
Начните с симптома: портрет, который в телефонной галерее выглядит вертикально, в другом средстве просмотра может оказаться боком. EXIF Ориентация — это инструкция, прикрепленная к файлу, с восемью возможными значениями, описывающими перевороты и четвертьобороты. Полезное свидетельство здесь уже, чем общее обещание браузера: этот редактор загружает HTML изображение из объекта с заданной областью URL, рисует декодированный результат и не имеет приспособления, подтверждающего, как каждый браузер обрабатывает каждое значение ориентации.
Используйте скопированную фотографию с телефона в качестве тестового образца. Запишите его отображаемые размеры, сделайте небольшую обрезку, экспортируйте его и откройте загрузку во второй программе просмотра. Экспорт холста перекодирует отображаемые пиксели через canvas.toBlob как PNG, JPEG или WebP; он не копирует исходный контейнер и не обещает сохранить EXIF. Сравнение показывает, что произошло с этим растром, а не то, что будет делать каждый файл.
Возможен боковой результат, но этот репозиторий не анализирует восемь значений ориентации EXIF.
Несоответствие существует потому, что камера может записывать строки датчиков в удобном физическом порядке, сохраняя при этом компактную инструкцию о том, как эти строки должны быть представлены. Относитесь к этому объяснению как к контексту, а не как к утверждению об этом приложении. Репозиторий не анализирует восемь значений ориентации EXIF и не доказывает, какие версии браузера применяют их, прежде чем изображение достигнет холста.
Это ограничение меняет практический рабочий процесс. Оставьте оригинал нетронутым, откройте дубликат и оцените декодированный вид, а не предполагайте, что тег был интерпретирован правильно. Редактор может поворачивать весь растр с шагом в девяносто градусов, но не может редактировать или восстанавливать метаданные ориентации. Таким образом, экспорт представляет собой новый результат пикселя, поведение которого следует проверить в интересующем вас средстве просмотра.
Обоснованием хранения камеры являются доказательства за пределами хранилища; проверить фактический результат декодирования
Браузер может декодировать изображение с помощью инструкции ориентации, уже отраженной в визуализированных пикселях. Современные API могут предоставлять варианты декодирования, включая параметры createImageBitmap, но этот путь кода не вызывает createImageBitmap и не устанавливает параметр imageOrientation. Он создает изображение HTML из объекта URL и рисует это изображение, поэтому реальный файл телефона и браузер остаются частью эксперимента.
Проверяйте результат в два этапа: сначала в редакторе, затем после экспорта. Обратите внимание как на видимое книжное направление, так и на ширину и высоту, указанные в документе. Если первый вид неверен, поворот на четверть оборота вручную может привести к тому, что рабочий растр будет выглядеть правильно. Если первая точка зрения верна, избегайте утверждений, что исходные метаданные понимались универсально; свидетельства хранилища подтверждают только наблюдаемый декодированный результат.
Этот редактор загружает изображение HTML и не устанавливает явную опцию декодирования ориентации.
Как только пиксели проходят через холст и снова кодируются, исходный контейнер больше не является доставляемым объектом. Редактор объединяет декодированные пиксели с кадрированием и любыми другими видимыми изменениями, а затем вызывает canvas.toBlob для вывода PNG, JPEG или WebP. Этот процесс не обещает сохранить поля EXIF. В частности, эта реализация не может редактировать или восстанавливать тег ориентации для интерпретации последующим зрителем.
Самым безопасным описанием загрузки является изображение, содержащее пиксели, созданные в ходе этого сеанса редактирования. Снова откройте его в другом средстве просмотра и проверьте направление, прежде чем поделиться им. Если этот зритель согласен, вы подтвердили один конкретный экспорт. Вы не сертифицировали все поведение EXIF, но заменили неоднозначную инструкцию метаданных тестируемым растровым результатом для этого файла.
Экспорт холста перекодирует отображаемые пиксели, но не подтверждает, какие поля метаданных остаются.
Рассмотрим портретную фотографию телефона, предназначенную для сообщения. Откройте дубликат, посмотрите, отображает ли редактор человека в вертикальном положении, и обратите внимание на декодированные размеры перед обрезкой. Если сцена расположена сбоку, поверните растр с шагом в девяносто градусов, пока рабочее изображение не станет визуально правильным, а затем обрезайте только после этой коррекции. Эта операция представляет собой редактирование пикселей, а не восстановление метаданных файла.
Экспортируйте обрезку и сравните ее с видом редактора во второй программе просмотра изображений. PNG, JPEG и WebP создаются из холста, поэтому выходные данные представляют собой перекодированное изображение, а не исходный контейнер телефона. Запишите используемый формат и программу просмотра, если результат имеет значение для оперативной работы. Этот небольшой аудит дает вам доказательства этого портрета, избегая при этом необоснованных обещаний в отношении каждого телефона или браузера.
Сработала проверка: сравните декодированные размеры и внешний вид перед обрезкой и экспортом.
Вокруг этого расследования есть четкие границы. В редакторе нет инспектора метаданных, редактора EXIF или инструмента для восстановления исходного значения ориентации. Он также не может заставить средство просмотра, которое игнорирует метаданные ориентации, вести себя правильно. Эти задания принадлежат программному обеспечению, предназначенному для сохранения или перезаписи контейнеров изображений, а не рабочему процессу холста, выходные данные которого представляют собой сглаженный растр.
То же предостережение применимо и к другим полям EXIF, таким как время съемки, местоположение и сведения о камере. При экспорте холста пиксели декодируются с помощью canvas.toBlob и не подтверждается, какие поля метаданных остаются. Сохраните оригинал, если эти поля имеют значение, используйте редактор для работы с видимым изображением и проверьте экспортированный файл, прежде чем рассматривать его как замену, сохраняющую метаданные.
Вывод: редактируйте один раз, вертикально везде — как редактирование в редакторе изображений и рисунков в браузере создает файл, который отображается одинаково во всех программах просмотра.
Практический вывод прост, но намеренно ограничен: отредактируйте видимый растр, затем проверьте экспортированную ориентацию в другом средстве просмотра. Редактор изображений и рисунков в браузере полезен для открытия фотографии с местного телефона, поворота всего растра с шагом в девяносто градусов, обрезки его и создания загрузки PNG, JPEG или WebP. Его загрузчик и путь экспорта не оправдывают претензии на универсальную обработку EXIF.
Надежная проверка занимает меньше минуты. Сохраните исходный код, откройте копию, запишите исходное направление и размеры, сделайте одно небольшое редактирование, экспортируйте один раз и проверьте загрузку в другом месте. Если файл неправильный, вернитесь к копии и исправьте пиксели вручную; не думайте, что здесь можно восстановить тег ориентации. Подтвержденный результат — это файл, который вы действительно открыли и проверили.