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

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

просто добавьте это в ваш CSS:

img {
    image-orientation: from-image;
}

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

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

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

открыть его в Chrome: правильный путь Откройте его в FF: правильный путь вверх Откройте его в IE: вверх ногами

раскройте его в краске: вверх ногами Откройте его в Photoshop: правильный путь вверх. так далее.

Это данные EXIF, которые включает в себя ваш телефон Samsung.

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

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

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

простой способ исправить проблему, без кодирования, заключается в использовании функции сохранения Photoshop для веб-экспорта. В диалоговом окне можно выбрать удаление всех или большинства данных EXIF изображения. Я обычно просто сохраняю авторские права и контактную информацию. Кроме того, поскольку изображения, поступающие непосредственно с цифровой камеры, значительно увеличены для веб-дисплея, рекомендуется уменьшить их с помощью Save for the Web в любом случае. Для тех, кто не разбирается в Photoshop, я не сомневаюсь, что есть онлайн-ресурсы для изменения размера изображение и удаление из него любых ненужных данных EXIF.

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

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

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

<?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

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

поворот.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>

поворот.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";
            }
        });
};

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

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