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

142

У мене є зображення за цим посиланням: 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

Хм, справді? У моєму Firefox оригінал все ще нормальний, а зображення в img перевернуте.

— Ледачий журнал

1

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

— Кевін Лінч

2

regex.info/… Є Orientation: Rotate 180в EXIF.

— dfsq

1

Проблема з метаданими фотографії визначає орієнтацію. Я не знаю, чому тег зображення не враховує це. Я ще не знайшов жодної хорошої відповіді ...

— Чет,

91

Я знайшов частину рішення. Тепер зображення мають метадані, які задають орієнтацію фотографії. Існує нова специфікація 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 навколо нього.

— авен

2

Обережно з цим, як це експериментально. Перевірте сумісність браузера, яка не виглядає добре для більшості браузерів. Сподіваємось, вони розберуться у якийсь момент.

— програв переклад

35

Це не сумісно з більшістю браузерів сьогодні caniuse.com/#search=image-orientation

— Gabriel C

2

Чому у світі зображення навіть мають метадані орієнтації? Якби ви дійсно хотіли обертати зображення, то чи не просто ви змістите пікселі та поміняєте ширину на висоту?

— Джек Гіффін

15

Як це отримало стільки результатів? Він надзвичайно не підтримується і не працює ні для чого, крім firefox caniuse.com/#search=image-orientation

— Друг

26

Ваше зображення насправді перевернуте. Але він має мета-атрибут "Орієнтація", який повідомляє глядачеві, що він повинен бути повернутим на 180 градусів. Деякі пристрої / глядачі не дотримуються цього правила.

Відкрийте його в Chrome: вправо вгору Відкрийте в FF: вправо вгору Відкрийте його в IE: догори дном

Відкрийте його у Paint: Upstaide Down Відкрийте його у Photoshop: Правильний шлях вгору. тощо.

— i-CONICA
джерело

1

Чи маєте ви якесь уявлення, як ми можемо їх запобігти перед завантаженням зображення? Оскільки це зображення завантажується безпосередньо користувачем, тому мені потрібно знайти спосіб подолати це

— The Lazy Log

Якщо це послуга, на якій розміщуватимуться зображення, краще все-таки повторно кодувати зображення з розмірності, розміру файлів та міркувань безпеки, так що це може виправити їх у перекодованій версії.

— i-CONICA

Я бачу. Мені потрібно буде знайти кращий спосіб впоратися з цим. Можливо, мені потрібно обробити зображення після його завантаження в S3

— The Lazy Log

Ви можете використовувати бібліотеку GD в PHP.

— i-CONICA

5

Більш простим способом було б видалити метадані орієнтації та перевернути зображення. Imagemagick забезпечує перетворення -autoorient функцію, яка буде це робити.

— saurabheights

19

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

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

хороша відповідь, але як я можу викликати цей метод на існуючому файлі зображення?

— Матриця

Ви повинні відтворити версії. Я думаю, щось подібне спрацювало б: stackoverflow.com/a/9065832/461640

— Ледачий журнал

11

зберегти як png вирішив проблему для мене.

— Сидів Мостафа Мусаві Кахакі
джерело

1

Це рішення корисне лише для зображень, які не є фотографіями: "Формат JPG - це стислий формат файлу, що втрачається. Це робить його корисним для зберігання фотографій меншого розміру, ніж BMP. JPG - це звичайний вибір для використання в Інтернеті, оскільки це стислі. Для зберігання лінійних малюнків, тексту та знакових графічних зображень із меншим розміром файлу GIF або PNG - кращий вибір, оскільки вони не втрачають ". - labnol.org/software/tutorials/…

— Kc Gibson

приголомшливий, вирішили подяку

— Т. Шашват

2

Збережено його як PNG, після чого знову повернемося до JPG, що зберігає розмір файлу низьким і правильно зберігає орієнтацію, дякую.

— MDave

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)')
});

— bsap
джерело

7

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

— user4504661
джерело

6

Це дані EXIF, які містить ваш телефон Samsung.

— Трейс Декой
джерело

1

Так, це відбувається лише із зображеннями, зробленими телефоном Samsung?

— The Lazy Log

4

Трапляється з кількома. Я бачив це і на iPhone.

— Trace DeCoy

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

— ManuelJE,

5

Доки 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

Це відбувається, оскільки оригінальна орієнтація зображення не така, як ми бачимо в переглядачі зображень. У таких випадках зображення відображається вертикально до нас у переглядачі зображень, але воно є фактично горизонтальним.

Щоб вирішити це, виконайте такі дії:

Відкрийте зображення в редакторі зображень, як фарба (у Windows) або ImageMagick (у Linux).
Повернути зображення вліво / вправо.
Збережіть зображення.

Це має вирішити проблему назавжди.

— Юврай Патіл
джерело

1

Простий спосіб вирішити проблему - кодування без використання Photoshop - зберегти функцію збереження для веб-експорту. У діалоговому вікні ви можете видалити всі або більшість EXIF-даних зображення. Зазвичай я зберігаю авторські права та контактну інформацію. Крім того, оскільки зображення, що надходять безпосередньо з цифрової камери, сильно збільшуються для відображення в Інтернеті, все-таки корисно зменшити їх розмір за допомогою Save for Web. Для тих, хто не знає Photoshop, я не сумніваюся, що є інтернет-ресурси для зміни розміру зображення та позбавлення його від зайвих EXIF-даних.

— AlGator
джерело

4

Але якщо ви розробляєте додаток, де користувачі можуть вибрати будь-яке зображення для завантаження, як використовувати Photoshop у такому випадку? :)

— The Lazy Log

1

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

— Кай Зуу
джерело

-19

Використовуйте зовнішню укладку. в аркуші html дайте тегу назву класу. на аркуші стилів використовуйте оператор крапки, попередній за назвою класу, а потім напишіть наступний код

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

— msd
джерело

Це не узагальнене рішення. Працюватиме конкретно над зображенням,

— поданим