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

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

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

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

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

img {
    image-orientation: from-image;
}

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

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

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

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

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

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

mogrify -auto-orient *

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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