img wyświetla nieprawidłową orientację

142

Mam obraz pod tym linkiem: http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg

Jak widać, jest to normalny obraz z prawidłową orientacją. Jednak kiedy ustawię ten link na atrybut src mojego tagu obrazu, obraz stanie się do góry nogami. http://jsfiddle.net/7j5xJ/

<img src="http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg" width="200"/>

Rozwiń fragment

Czy masz pojęcie, co się dzieje?

html css image

— Leniwy Dziennik
źródło

W przeglądarce Firefox w obu przypadkach jest do góry nogami. Myślę, że Chrome jest wystarczająco inteligentny, aby obracać go automatycznie na podstawie informacji EXIF.

— dfsq

Hmm, naprawdę? W moim Firefoksie oryginał jest nadal normalny, a obraz w img jest do góry nogami.

— The Lazy Log

1

Myślę, że sam obraz jest do góry nogami i cloudfrontmoże obracać go na stronie. Można wymusić obracać za pomocą CSS jsfiddle.net/7j5xJ/1

— Kevin Lynch

2

regex.info/ ... Ma Orientation: Rotate 180w EXIF.

— dfsq,

1

Jest to problem z metadanymi zdjęcia, które określają orientację. Nie wiem, dlaczego tag obrazu nie uwzględnia tego. Nie znalazłem jeszcze żadnych dobrych odpowiedzi ...

— Chet

91

Znalazłem część rozwiązania. Obrazy mają teraz metadane określające orientację zdjęcia. Dostępna jest nowa specyfikacja CSS dlaimage-orientation .

Po prostu dodaj to do swojego CSS:

img {
    image-orientation: from-image;
}

Zgodnie ze specyfikacją z 25 stycznia 2016 r., Firefox i iOS Safari (za prefiksem) są jedynymi przeglądarkami, które to obsługują. Nadal widzę problemy z przeglądarką Safari i Chrome. Jednak mobilna Safari wydaje się natywnie obsługiwać orientację bez tagu CSS.

Przypuszczam, że będziemy musieli poczekać i zobaczyć, czy przeglądarki zaczną wspierać image-orientation.

— Chet
źródło

3

Dziwne przeglądarki, które testowałem (Safari, Chrome i Firefox na Macu w ich ostatnich wcieleniach) poprawnie obsługują flagę, gdy obraz jest wyświetlany bezpośrednio, bez żadnego HTMLa wokół niego.

— anw

2

Ostrożnie z tym, ponieważ jest to eksperymentalne. Sprawdź zgodność przeglądarki, która nie wygląda dobrze dla większości przeglądarek. Mam nadzieję, że kiedyś to rozwiążą.

— Lostintranslation

35

Nie jest to zgodne z większością dzisiejszych przeglądarek caniuse.com/#search=image-orientation

— Gabriel C

2

Dlaczego na świecie obrazy mają nawet metadane orientacji? Gdybyś naprawdę chciał obrócić obraz, czy nie przesuwałbyś po prostu wokół pikseli i zamieniał szerokość na wysokość?

— Jack Giffin

15

Skąd wzięło się tak wiele głosów pozytywnych? Jest bardzo nieobsługiwany i nie działa na nic poza firefox caniuse.com/#search=image-orientation

— A Friend

26

Twój obraz jest faktycznie do góry nogami. Ale ma meta atrybut „Orientacja”, który mówi widzowi, że powinien być obrócony o 180 stopni. Niektóre urządzenia / przeglądarki nie przestrzegają tej zasady.

Otwórz w Chrome: w prawo w górę Otwórz w FF: w prawo w górę Otwórz w IE: do góry nogami

Otwórz w programie Paint: do góry nogami Otwórz w Photoshopie: od razu do góry. itp.

— i-CONICA
źródło

1

Czy masz pomysł, jak możemy temu zapobiec, zanim użytkownik załaduje obraz? Ponieważ ten obraz jest przesyłany bezpośrednio przez użytkownika, muszę znaleźć sposób, aby temu zaradzić

— The Lazy Log,

Jeśli jest to usługa, która będzie hostować obrazy, i tak najlepiej ponownie zakodować obrazy ze względu na wymiary, rozmiar pliku i ze względów bezpieczeństwa, więc może to naprawić je w ponownie zakodowanej wersji.

— i-CONICA

Widzę. Będę musiał znaleźć lepszy sposób, aby sobie z tym poradzić. Może muszę przetworzyć obraz po przesłaniu go do S3

— The Lazy Log,

Możesz skorzystać z biblioteki GD w PHP.

— i-CONICA,

5

Prostszym sposobem byłoby usunięcie metadanych orientacji i odwrócenie obrazu. Imagemagick zapewnia funkcję konwersji automatycznej, która to zrobi.

— saurabheights

19

Jeśli masz dostęp do Linuksa, otwórz terminal, przejdź do katalogu zawierającego obrazy, a następnie uruchom

mogrify -auto-orient *

Powinno to trwale rozwiązać problemy z orientacją na wszystkich obrazach.

— Paul Chris Jones
źródło

4

To zadziałało dla mnie, być może będziesz musiał uruchomić brew install imagemagickna komputerze Mac, jeśli dostanieszcommand not found: mogrify

— Kyle

Do następnego obrazu… czy ma jakieś wady?

— Harry Bosh

12

Zapomniałem dodać tutaj własną odpowiedź. Używałem Ruby on Rails, więc może nie mieć zastosowania do twoich projektów w PHP lub innych frameworkach. W moim przypadku do przesyłania zdjęć korzystałem z klejnotu Carrierwave. Moim rozwiązaniem było dodanie następującego kodu do klasy uploader, aby naprawić problem EXIF przed zapisaniem pliku.

process :fix_exif_rotation
def fix_exif_rotation
  manipulate! do |img|
    img.auto_orient!
    img = yield(img) if block_given?
    img
  end
end

— Leniwy Dziennik
źródło

1

dobra odpowiedź, ale jak mogę wywołać tę metodę na istniejącym pliku obrazu?

— Matrix,

Musisz odtworzyć wersje. Myślę, że coś takiego by zadziałało: stackoverflow.com/a/9065832/461640

— The Lazy Log,

11

zapisz jako png rozwiązał problem za mnie.

— Seyed Mostafa Mousavi Kahaki
źródło

1

To rozwiązanie jest przydatne tylko w przypadku obrazów, które nie są zdjęciami: „Format JPG jest formatem plików z kompresją stratną. Dzięki temu jest przydatny do przechowywania zdjęć w mniejszym rozmiarze niż BMP. JPG jest często wybieranym do użytku w Internecie, ponieważ jest skompresowane. Do przechowywania rysunków liniowych, tekstu i ikonicznych grafik w mniejszym rozmiarze pliku GIF lub PNG są lepszym wyborem, ponieważ są bezstratne ”. - labnol.org/software/tutorials/…

— Kc Gibson

niesamowite, rozwiązane Dzięki

— T. Shashwat,

2

Zapisałem go jako PNG, a następnie ponownie z powrotem do JPG, który utrzymuje mały rozmiar pliku i poprawnie zapisał orientację, dzięki.

— MDave

10

Ta odpowiedź opiera się na odpowiedzi bsap przy użyciu Exif-JS , ale nie opiera się na jQuery i jest dość kompatybilna nawet ze starszymi przeglądarkami. Oto przykładowe pliki html i 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
źródło

exif-js jest teraz tak przestarzały i nieobsługiwany, że zawodzi w niektórych środowiskach, takich jak wszędzie, gdzie włączony jest tryb ścisły. Naprawdę potrzebujemy rozwiązania tego problemu. Moja aplikacja jest frustrująca, a każde obejście, które znalazłem, ma wiele wad.

— Methodician

9

Możesz użyć Exif-JS , aby sprawdzić właściwość „Orientation” obrazu. Następnie zastosuj transformację CSS w razie potrzeby.

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

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

— bsap
źródło

7

Ten problem też doprowadzał mnie do szału. Używałem PHP po stronie serwera, więc nie mogłem użyć rozwiązań @The Lazy Log (ruby) i @deweydb (python). Jednak wskazało mi to właściwy kierunek. Naprawiłem to na kopii zapasowej za pomocą getImageOrientation () firmy 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); 
} 
?>

Oto link, jeśli chcesz przeczytać więcej. http://php.net/manual/en/imagick.getimageorientation.php

— user4504661
źródło

6

To dane EXIF, które zawiera Twój telefon Samsung.

— Trace DeCoy
źródło

1

Ach, więc dzieje się tak tylko w przypadku zdjęć wykonanych telefonem Samsung?

— The Lazy Log,

4

Dzieje się z kilkoma. Widziałem to również na iPhone'ach.

— Trace DeCoy

Metadane EXIF mogą zawierać informacje o samym zdjęciu (czas otwarcia migawki, apertura obiektywu, czułość izo, odległość ogniskowania itp.), Dane kontekstowe (data, godzina, temperatura, wilgotność) i mogą zawierać współrzędne GPS oraz zaokrąglony kąt obrotu do 90 ° wielokrotność. Zdecydowana większość dzisiejszych smartfonów i aparatów umieszcza te metadane w bloku EXIF, więc IMHO to tylko kwestia czasu, aby przeglądarki automatycznie zastosowały prawidłową rotację klatek.

— ManuelJE

5

Dopóki CSS: nie image-orientation:from-image;jest bardziej uniwersalnie obsługiwany, robimy rozwiązanie po stronie serwera w Pythonie. Oto sedno tego. Sprawdzasz orientację danych exif, a następnie odpowiednio obracasz obraz i ponownie zapisujesz.

Preferujemy to rozwiązanie od rozwiązań po stronie klienta, ponieważ nie wymaga ładowania dodatkowych bibliotek po stronie klienta, a operacja ta musi się odbyć tylko raz podczas przesyłania pliku.

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
źródło

3

Dzieje się tak, ponieważ oryginalna orientacja obrazu nie jest taka, jaką widzimy w przeglądarce obrazów. W takich przypadkach obraz jest wyświetlany pionowo względem nas w przeglądarce obrazów, ale w rzeczywistości jest poziomy.

Aby rozwiązać ten problem, wykonaj następujące czynności:

Otwórz obraz w edytorze obrazów, takim jak paint (w systemie Windows) lub ImageMagick (w systemie Linux).
Obróć obraz w lewo / w prawo.
Zapisz obraz.

Powinno to trwale rozwiązać problem.

— Yuvraj Patil
źródło

1

Łatwym sposobem rozwiązania problemu bez kodowania jest użycie funkcji eksportu programu Photoshop Save for Web. W oknie dialogowym można wybrać usunięcie wszystkich lub większości danych EXIF obrazu. Zwykle po prostu zachowuję prawa autorskie i dane kontaktowe. Ponadto, ponieważ obrazy pochodzące bezpośrednio z aparatu cyfrowego są znacznie większe, aby można je było wyświetlić w Internecie, dobrym pomysłem jest zmniejszenie ich rozmiaru za pomocą funkcji Save for the Web. Dla tych, którzy nie są obeznani z Photoshopem, nie mam wątpliwości, że istnieją zasoby online do zmiany rozmiaru obrazu i pozbycia się z niego niepotrzebnych danych EXIF.

— AlGator
źródło

4

Ale jeśli tworzysz aplikację, w której użytkownicy mogą wybrać dowolny obraz do przesłania, jak w takim przypadku użyć programu Photoshop? :)

— The Lazy Log

1

Myślę, że są pewne problemy z automatyczną poprawką orientacji obrazu w przeglądarce, na przykład, jeśli odwiedzę zdjęcie bezpośrednio, pokazuje ono właściwą orientację, ale pokazuje niewłaściwą orientację na niektórych wyjściach ze strony html.

— Kai Zou
źródło

-19

Użyj stylizacji zewnętrznej. w arkuszu html podaj nazwę klasy do tagu. w arkuszu stylów użyj operatora kropki poprzedzonego nazwą klasy, a następnie napisz następujący kod

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

— msd
źródło

Nie jest to uogólnione rozwiązanie. Będzie działać specjalnie na podanym obrazie

— th3pirat3