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

Question 1

У меня есть изображение по этой ссылке: 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"/>

Развернуть фрагмент

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

Question 2

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

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

img {
    image-orientation: from-image;
}

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

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

Question 3

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

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

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

Question 4

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

mogrify -auto-orient *

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

Question 5

Я забыл добавить сюда свой ответ. Я использовал 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

Question 6

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

Question 7

Этот ответ основан на ответе 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";
            }
        });
};

Question 8

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

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

                if(orientation == 6)
                    $(imageElement).css('transform', 'rotate(90deg)')
});

Question 9

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

Question 10

Эта проблема тоже сводила меня с ума. Я использовал 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

Question 11

Пока 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)

Question 12

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

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

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

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

Question 13

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

Question 14

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

Question 15

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

.rotate180 {
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 transform: rotate(180deg);
 }

Answer 1

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

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

Чет

Answer 2

В firefox в обоих случаях он перевернут. Я думаю, что Chrome достаточно умен, чтобы автоматически вращать его на основе информации EXIF.

dfsq 09

Answer 3

Хм действительно? В моем firefox оригинал все еще нормальный, а изображение в img перевернуто.

Ленивый журнал

Answer 4

1

Я думаю, что само изображение перевернуто и cloudfrontможет вращаться на странице. Вы можете принудительно выполнить поворот через CSS jsfiddle.net/7j5xJ/1

Кевин Линч

Answer 5

2

regex.info/... Он имеет Orientation: Rotate 180в EXIF.

dfsq 09

Answer 6

1

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

Чет

Answer 7

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

Друг

Answer 8

3

Как ни странно, браузеры, которые я тестировал (Safari, Chrome и Firefox на Mac в их последних воплощениях), правильно обрабатывают флаг, когда изображение отображается напрямую без какого-либо HTML-кода вокруг него.

anw 08

Answer 9

2

Осторожно с этим, так как это экспериментально. Проверьте совместимость браузера, он не подходит для большинства браузеров. Надеюсь, они когда-нибудь разберутся с этим.

lostintranslation

Answer 10

36

Это несовместимо с большинством современных браузеров caniuse.com/#search=image-orientation

Gabriel C

Answer 11

2

Почему вообще у изображений есть метаданные ориентации? Если бы вы действительно хотели повернуть изображение, разве вы не могли бы просто переместить пиксели и поменять ширину на высоту?

Джек Гиффин,

Answer 12

16

Откуда столько голосов? Он крайне не поддерживается и не работает ни с чем, кроме firefox caniuse.com/#search=image-orientation

Друг

Answer 13

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

Answer 14

1

Вы знаете, как мы можем предотвратить это, прежде чем пользователь загрузит изображение? Поскольку это изображение загружено непосредственно пользователем, мне нужно найти способ преодолеть это

Ленивый журнал

Answer 15

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

i-CONICA

Answer 16

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

The Lazy Log

Answer 17

Вы можете использовать библиотеку GD в PHP.

i-CONICA

Answer 18

5

Более простой способ - удалить метаданные ориентации и перевернуть изображение. Imagemagick предоставляет функцию convert -autoorient, которая сделает это.

saurabheights 09

Answer 19

19

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

mogrify -auto-orient *

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

Пол Крис Джонс
источник

4

Это сработало для меня, вам может потребоваться запустить brew install imagemagickна Mac, если у вас естьcommand not found: mogrify

Кайл

До следующего изображения .. есть ли у него минусы?

Гарри Бош

Answer 20

4

Это сработало для меня, вам может потребоваться запустить brew install imagemagickна Mac, если у вас естьcommand not found: mogrify

Кайл

Answer 21

До следующего изображения .. есть ли у него минусы?

Гарри Бош

Answer 22

Я забыл добавить сюда свой ответ. Я использовал 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

Answer 23

1

хороший ответ, но как я могу вызвать этот метод для существующего файла изображения?

Matrix

Answer 24

Вам нужно воссоздать версии. Думаю, что-то вроде этого сработает: stackoverflow.com/a/9065832/461640

Ленивый журнал

Answer 25

11

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

Сейед Мостафа Мусави Кахаки
источник

1

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

Kc Gibson

потрясающе,

решено

2

Сохранил его как PNG, затем снова вернулся в JPG, который сохраняет небольшой размер файла и правильную ориентацию, спасибо.

Mave

Answer 26

1

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

Kc Gibson

Answer 27

потрясающе,

решено

Answer 28

2

Сохранил его как PNG, затем снова вернулся в JPG, который сохраняет небольшой размер файла и правильную ориентацию, спасибо.

Mave

Answer 29

Этот ответ основан на ответе 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";
            }
        });
};

Answer 30

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

Методист

Answer 31

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

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

                if(orientation == 6)
                    $(imageElement).css('transform', 'rotate(90deg)')
});

Answer 32

7

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

Трейс ДеКой
источник

1

Ах, так это происходит только с изображениями, сделанными телефоном Samsung?

The Lazy Log

4

Бывает с несколькими. Я тоже видел это на iPhone.

Trace DeCoy 09

Метаданные EXIF могут включать информацию о самой фотографии (выдержка, диафрагма объектива, ISO-чувствительность, расстояние фокусировки и т. Д.), Контекстные данные (дата, время, температура, влажность) и могут содержать координаты GPS, а также округленный угол поворота. кратное до 90 °. Подавляющее большинство современных смартфонов и камер помещают эти метаданные в блок EXIF, поэтому, IMHO, это просто вопрос времени, когда браузеры автоматически применяют правильное вращение кадра.

ManuelJE

Answer 33

1

Ах, так это происходит только с изображениями, сделанными телефоном Samsung?

The Lazy Log

Answer 34

4

Бывает с несколькими. Я тоже видел это на iPhone.

Trace DeCoy 09

Answer 35

Метаданные EXIF могут включать информацию о самой фотографии (выдержка, диафрагма объектива, ISO-чувствительность, расстояние фокусировки и т. Д.), Контекстные данные (дата, время, температура, влажность) и могут содержать координаты GPS, а также округленный угол поворота. кратное до 90 °. Подавляющее большинство современных смартфонов и камер помещают эти метаданные в блок EXIF, поэтому, IMHO, это просто вопрос времени, когда браузеры автоматически применяют правильное вращение кадра.

ManuelJE

Answer 36

Эта проблема тоже сводила меня с ума. Я использовал 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

Answer 37

Пока 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)

Answer 38

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

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

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

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

Answer 39

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

Answer 40

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

Answer 41

4

Но если вы разрабатываете приложение, в котором пользователи могут выбрать любое изображение для загрузки, как в этом случае использовать Photoshop? :)

The Lazy Log

Answer 42

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

.rotate180 {
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 transform: rotate(180deg);
 }

Answer 43

Это не обобщенное решение. Будет работать конкретно над изображением, о котором идет речь

th3pirat3 09

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

Ответы: