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

Odpowiedzi:

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:

  1. Otwórz obraz w edytorze obrazów, takim jak paint (w systemie Windows) lub ImageMagick (w systemie Linux).

  2. Obróć obraz w lewo / w prawo.

  3. 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