Рисование фотографии из файла на холст вращается в Chrome на основе EXIF - PullRequest
Новая
       44

Рисование фотографии из файла на холст вращается в Chrome на основе EXIF

2 голосов
/ 21 апреля 2020

Chrome автоматически поворачивает любое изображение из входного файла, нарисованного на холсте, на основе его данных exif. Это здорово, но iOS не делает то же самое. Есть ли способ предотвратить такое поведение, чтобы я мог просто изменить изображение сам. С исправлением, которое я написал, оно работает в iOS, отключение этого исправления в Android ... скорее отключит / включит, а затем сыграет в игру, идентифицирующую браузер.

Я попытался установить стиль изображение к изображению-ориентация: нет; .... но это ничего не сделало. По-прежнему поворачивал его.

Редактировать: я обнаружил это, посмотрев, было ли значение 'imageOrientation' для объекта стиля неопределенным или пустая строка во вновь создаваемом теге img. Может быть, не идеальный тест, но он работал для моих ситуаций, которые я тестировал. Не уверен в том, насколько это будущее.

Ответы [ 3 ]

2 голосов
/ 01 мая 2020

Это связано с обновлением в Chrome 81, которое теперь имеет и учитывает свойство 'image-ориентации'. https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation

Chrome теперь по умолчанию для всех изображений установлено значение «from-image», что означает, что он будет считывать данные EXIF ​​для определения данных поворота изображения. Ниже в основном то, что я сделал, чтобы определить, поддерживает ли браузер такую ​​функциональность, поскольку будущие версии iOS и другие браузеры ожидают, что это тоже будет сделано. 

function browserImageRotationSupport(){
    let imgTag = document.createElement('img');
    return imgTag.style.imageOrientation !== undefined;
}
0 голосов
/ 06 мая 2020

Установка CSS для элемента canvas в отличие от img исправит это, если вы будете рисовать на холсте, который является частью DOM. 

canvas {
    image-orientation: none;
}

По состоянию на запись элемента должна быть в DOM, потому что он использует вычисленный стиль. Это существует только в контексте DOM. Вы можете прочитать больше в выпуске на трекере Chromium.

https://bugs.chromium.org/p/chromium/issues/detail?id=158753

0 голосов
/ 26 апреля 2020 
const iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);

Я использую этот фрагмент, чтобы проверить, является ли он IOS, и вращаю холст ctx, только если это IOS. Я думаю, что старые версии android не поворачивают изображение автоматически, потому что у меня все еще есть сообщения об ошибках, поступающие от android пользователей.

...