Тег img отображает неправильную ориентацию

145

У меня есть изображение по этой ссылке: http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg

Как видите, это нормальное изображение с правильной ориентацией. Однако, когда я устанавливаю эту ссылку на атрибут src моего тега изображения, изображение становится перевернутым. http://jsfiddle.net/7j5xJ/

<img src="http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg" width="200"/>
Развернуть фрагмент

Вы хоть понимаете, что происходит?

html  css  image 
— Ленивый журнал
источник
В firefox в обоих случаях он перевернут. Я думаю, что Chrome достаточно умен, чтобы автоматически вращать его на основе информации EXIF.
— dfsq 09
Хм действительно? В моем firefox оригинал все еще нормальный, а изображение в img перевернуто.
— Ленивый журнал
1
Я думаю, что само изображение перевернуто и cloudfrontможет вращаться на странице. Вы можете принудительно выполнить поворот через CSS jsfiddle.net/7j5xJ/1
— Кевин Линч
2
regex.info/... Он имеет Orientation: Rotate 180в EXIF.
— dfsq 09
1
Это проблема с метаданными фотографии, которые определяют ориентацию. Я не знаю, почему тег изображения не учитывает это. Я еще не нашел хороших ответов ...
— Чет

Ответы:

93

Я нашел часть решения. Теперь у изображений есть метаданные, которые определяют ориентацию фотографии. Есть новая спецификация CSS дляimage-orientation .

Просто добавьте это в свой CSS:

img {
    image-orientation: from-image;
}

Согласно спецификации от 25 января 2016 года, Firefox и iOS Safari (за префиксом) являются единственными браузерами, которые поддерживают это. Я все еще вижу проблемы с Safari и Chrome. Однако мобильный Safari, похоже, изначально поддерживает ориентацию без тега CSS.

Полагаю, нам придется подождать и посмотреть, начнут ли браузеры поддерживать image-orientation.

— Чет
источник
3
Как ни странно, браузеры, которые я тестировал (Safari, Chrome и Firefox на Mac в их последних воплощениях), правильно обрабатывают флаг, когда изображение отображается напрямую без какого-либо HTML-кода вокруг него.
— anw 08
2
Осторожно с этим, так как это экспериментально. Проверьте совместимость браузера, он не подходит для большинства браузеров. Надеюсь, они когда-нибудь разберутся с этим.
— lostintranslation
36
Это несовместимо с большинством современных браузеров caniuse.com/#search=image-orientation
— Gabriel C
2
Почему вообще у изображений есть метаданные ориентации? Если бы вы действительно хотели повернуть изображение, разве вы не могли бы просто переместить пиксели и поменять ширину на высоту?
— Джек Гиффин,
16
Откуда столько голосов? Он крайне не поддерживается и не работает ни с чем, кроме firefox caniuse.com/#search=image-orientation
— Друг
27

Ваше изображение на самом деле перевернуто. Но у него есть метаатрибут «Ориентация», который сообщает зрителю, что он должен быть повернут на 180 градусов. Некоторые устройства / зрители не соблюдают это правило.

Откройте его в Chrome: вверх ногами Откройте в FF: прямо вверх Откройте в IE: вверх ногами

Откройте его в Paint: вверх ногами. Откройте его в Photoshop: прямо вверх. и т.п.

— i-CONICA
источник
1
Вы знаете, как мы можем предотвратить это, прежде чем пользователь загрузит изображение? Поскольку это изображение загружено непосредственно пользователем, мне нужно найти способ преодолеть это
— Ленивый журнал
Если это для службы, которая будет размещать изображения, вам все равно лучше перекодировать изображения из соображений размера, размера и безопасности, чтобы это могло исправить их в перекодированной версии.
— i-CONICA
Понимаю. Мне нужно будет найти лучший способ справиться с этим. Возможно, мне нужно обработать изображение после того, как оно было загружено на S3
— The Lazy Log
Вы можете использовать библиотеку GD в PHP.
— i-CONICA
5
Более простой способ - удалить метаданные ориентации и перевернуть изображение. Imagemagick предоставляет функцию convert -autoorient, которая сделает это.
— saurabheights 09
19

Если у вас есть доступ к Linux, откройте терминал, перейдите в каталог, содержащий ваши изображения, а затем запустите

mogrify -auto-orient *

Это должно навсегда исправить проблемы с ориентацией на всех изображениях.

— Пол Крис Джонс
источник
4
Это сработало для меня, вам может потребоваться запустить brew install imagemagickна Mac, если у вас естьcommand not found: mogrify
— Кайл
До следующего изображения .. есть ли у него минусы?
— Гарри Бош
12

Я забыл добавить сюда свой ответ. Я использовал Ruby on Rails, поэтому он может быть неприменим к вашим проектам на PHP или других фреймворках. В моем случае я использовал гем Carrierwave для загрузки изображений. Мое решение заключалось в том, чтобы добавить следующий код в класс загрузчика, чтобы исправить проблему EXIF ​​перед сохранением файла.

process :fix_exif_rotation
def fix_exif_rotation
  manipulate! do |img|
    img.auto_orient!
    img = yield(img) if block_given?
    img
  end
end
— Ленивый журнал
источник
1
хороший ответ, но как я могу вызвать этот метод для существующего файла изображения?
— Matrix
Вам нужно воссоздать версии. Думаю, что-то вроде этого сработает: stackoverflow.com/a/9065832/461640
— Ленивый журнал
11

сохранить как png решило проблему для меня.

— Сейед Мостафа Мусави Кахаки
источник
1
Это решение полезно только для изображений, которые не являются фотографиями: «Формат JPG - это формат файла со сжатием с потерями. Это делает его полезным для хранения фотографий меньшего размера, чем BMP. JPG - это обычный выбор для использования в Интернете, потому что он сжатый. Для хранения штриховых рисунков, текста и пиктограмм в файле меньшего размера лучше использовать GIF или PNG, поскольку они не содержат потерь ». - labnol.org/software/tutorials/…
— Kc Gibson
потрясающе,
— решено
2
Сохранил его как PNG, затем снова вернулся в JPG, который сохраняет небольшой размер файла и правильную ориентацию, спасибо.
— Mave
10

Этот ответ основан на ответе bsap с использованием Exif-JS , но не полагается на jQuery и довольно совместим даже со старыми браузерами. Ниже приведены примеры файлов html и js:

rotate.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
  <html>
  <head>
    <style>
      .rotate90 {
       -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
       -o-transform: rotate(90deg);
       -ms-transform: rotate(90deg);
       transform: rotate(90deg);
      }
      .rotate180 {
       -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
       -o-transform: rotate(180deg);
       -ms-transform: rotate(180deg);
       transform: rotate(180deg);
      }
      .rotate270 {
       -webkit-transform: rotate(270deg);
       -moz-transform: rotate(270deg);
       -o-transform: rotate(270deg);
       -ms-transform: rotate(270deg);
       transform: rotate(270deg);
      }
    </style>
  </head>
  <body>
    <img src="pic/pic03.jpg" width="200" alt="Cat 1" id="campic" class="camview">
    <script type="text/javascript" src="exif.js"></script>
    <script type="text/javascript" src="rotate.js"></script>
  </body>
  </html>

rotate.js:

window.onload=getExif;
var newimg = document.getElementById('campic');
function getExif() {
    EXIF.getData(newimg, function() {
            var orientation = EXIF.getTag(this, "Orientation");
            if(orientation == 6) {
                newimg.className = "camview rotate90";
            } else if(orientation == 8) {
                newimg.className = "camview rotate270";
            } else if(orientation == 3) {
                newimg.className = "camview rotate180";
            }
        });
};
— VMQ
источник
exif-js сейчас настолько устарел и не обслуживается, что дает сбой в некоторых средах, например, везде, где включен строгий режим. Нам действительно нужно решение для этого. Мое приложение меня до чертиков расстраивает, и каждое обнаруженное мной решение имеет ряд недостатков.
— Методист
9

Вы можете использовать Exif-JS , чтобы проверить свойство «Ориентация» изображения. Затем примените преобразование css по мере необходимости.

EXIF.getData(imageElement, function() {
                var orientation = EXIF.getTag(this, "Orientation");

                if(orientation == 6)
                    $(imageElement).css('transform', 'rotate(90deg)')
});
— Бруно Портис
источник
7

Это данные EXIF, которые использует ваш телефон Samsung.

— Трейс ДеКой
источник
1
Ах, так это происходит только с изображениями, сделанными телефоном Samsung?
— The Lazy Log
4
Бывает с несколькими. Я тоже видел это на iPhone.
— Trace DeCoy 09
Метаданные EXIF ​​могут включать информацию о самой фотографии (выдержка, диафрагма объектива, ISO-чувствительность, расстояние фокусировки и т. Д.), Контекстные данные (дата, время, температура, влажность) и могут содержать координаты GPS, а также округленный угол поворота. кратное до 90 °. Подавляющее большинство современных смартфонов и камер помещают эти метаданные в блок EXIF, поэтому, IMHO, это просто вопрос времени, когда браузеры автоматически применяют правильное вращение кадра.
— ManuelJE
7

Эта проблема тоже сводила меня с ума. Я использовал PHP на стороне моего сервера, поэтому я не мог использовать решения @The Lazy Log (ruby) и @deweydb (python). Однако он указал мне правильное направление. Я исправил это на подложке с помощью Imagick getImageOrientation ().

<?php 
// Note: $image is an Imagick object, not a filename! See example use below. 
function autoRotateImage($image) { 
    $orientation = $image->getImageOrientation(); 

    switch($orientation) { 
        case imagick::ORIENTATION_BOTTOMRIGHT: 
            $image->rotateimage("#000", 180); // rotate 180 degrees 
        break; 

        case imagick::ORIENTATION_RIGHTTOP: 
            $image->rotateimage("#000", 90); // rotate 90 degrees CW 
        break; 

        case imagick::ORIENTATION_LEFTBOTTOM: 
            $image->rotateimage("#000", -90); // rotate 90 degrees CCW 
        break; 
    } 

    // Now that it's auto-rotated, make sure the EXIF data is correct in case the EXIF gets saved with the image! 
    $image->setImageOrientation(imagick::ORIENTATION_TOPLEFT); 
} 
?>

Вот ссылка, если вы хотите узнать больше. http://php.net/manual/en/imagick.getimageorientation.php

— user4504661
источник
6

Пока CSS: не image-orientation:from-image;будет поддерживаться повсеместно, мы делаем серверное решение с помощью python. Вот его суть. Вы проверяете ориентацию данных exif, затем соответствующим образом поворачиваете изображение и повторно сохраняете.

Мы предпочитаем это решение решениям на стороне клиента, поскольку оно не требует загрузки дополнительных библиотек на стороне клиента, и эта операция должна выполняться только один раз при загрузке файла.

if fileType == "image":
    exifToolCommand = "exiftool -j '%s'" % filePath
    exif = json.loads(subprocess.check_output(shlex.split(exifToolCommand), stderr=subprocess.PIPE))
    if 'Orientation' in exif[0]:
        findDegrees, = re.compile("([0-9]+)").search(exif[0]['Orientation']).groups()
        if findDegrees:
            rotateDegrees = int(findDegrees)
            if 'CW' in exif[0]['Orientation'] and 'CCW' not in exif[0]['Orientation']:
                rotateDegrees = rotateDegrees * -1
            # rotate image
            img = Image.open(filePath)
            img2 = img.rotate(rotateDegrees)
            img2.save(filePath)
— deweydb
источник
3

Это происходит потому, что исходная ориентация изображения отличается от той, которую мы видим в программе просмотра изображений. В таких случаях в средстве просмотра изображений изображение отображается вертикально по отношению к нам, но на самом деле оно горизонтальное.

Чтобы решить эту проблему, выполните следующие действия:

  1. Откройте изображение в редакторе изображений, например Paint (в Windows) или ImageMagick (в Linux).

  2. Поверните изображение влево / вправо.

  3. Сохраните изображение.

Это должно навсегда решить проблему.

— Юврай Патил
источник
1

Я думаю, что есть некоторые проблемы с автоматическим исправлением ориентации изображения в браузере, например, если я посещаю изображение напрямую, оно показывает правильную ориентацию, но показывает неправильную ориентацию на некоторых выходах html-страницы.

— Кай Дзо
источник
0

Простой способ решить проблему без кодирования - использовать функцию экспорта Photoshop «Сохранить для Интернета». В диалоговом окне можно выбрать удаление всех или большей части данных EXIF ​​изображения. Обычно я просто сохраняю авторские права и контактную информацию. Кроме того, поскольку изображения, поступающие непосредственно с цифровой камеры, имеют слишком большой размер для отображения в Интернете, в любом случае рекомендуется уменьшить их размер с помощью функции «Сохранить для Интернета». Для тех, кто не разбирается в Photoshop, я не сомневаюсь, что есть онлайн-ресурсы для изменения размера изображения и удаления из него любых ненужных данных EXIF.

— АлГатор
источник
4
Но если вы разрабатываете приложение, в котором пользователи могут выбрать любое изображение для загрузки, как в этом случае использовать Photoshop? :)
— The Lazy Log
-19

Используйте внешнюю укладку. в листе html присвойте тегу имя класса. в таблице стилей используйте оператор точки, которому предшествует имя класса, а затем напишите следующий код

.rotate180 {
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 transform: rotate(180deg);
 }
— MSD
источник
Это не обобщенное решение. Будет работать конкретно над изображением, о котором идет речь
— th3pirat3 09
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.