Das IMG-Tag zeigt eine falsche Ausrichtung an

142

Ich habe ein Bild unter diesem Link: http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg

Wie Sie sehen können, ist dies ein normales Bild mit korrekter Ausrichtung. Wenn ich diesen Link jedoch auf das src-Attribut meines Bild-Tags setze, wird das Bild auf den Kopf gestellt. http://jsfiddle.net/7j5xJ/

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

Hast du eine Idee, was los ist?

html css image Das faule Protokoll
quelle
In Firefox ist es in beiden Fällen verkehrt herum. Ich denke, Chrome ist intelligent genug, um es basierend auf EXIF-Informationen automatisch zu drehen.
dfsq
Hmm wirklich? In meinem Firefox ist das Original noch normal und das Bild in img ist verkehrt herum.
The Lazy Log
1
Ich denke, das Bild selbst ist verkehrt herum und cloudfrontkönnte es in der Seite drehen. Sie könnten eine Drehung über CSS erzwingen jsfiddle.net/7j5xJ/1
Kevin Lynch
2
regex.info/… Es hat Orientation: Rotate 180in EXIF.
dfsq
1
Es ist ein Problem mit Fotometadaten, die die Ausrichtung angeben. Ich weiß nicht, warum das Bild-Tag dies nicht berücksichtigt. Ich habe noch keine guten Antworten gefunden ...
Chet

Antworten:

91

Ich habe einen Teil der Lösung gefunden. Bilder haben jetzt Metadaten, die die Ausrichtung des Fotos angeben. Es gibt eine neue CSS-Spezifikation fürimage-orientation .

Fügen Sie dies einfach Ihrem CSS hinzu:

img {
    image-orientation: from-image;
}

Laut der Spezifikation vom 25. Januar 2016 sind Firefox und iOS Safari (hinter einem Präfix) die einzigen Browser, die dies unterstützen. Ich sehe immer noch Probleme mit Safari und Chrome. Mobile Safari scheint jedoch die Orientierung ohne das CSS-Tag nativ zu unterstützen.

Ich nehme an, wir müssen abwarten, ob Browser Unterstützung bieten image-orientation.

Chet
quelle
3
Seltsamerweise haben Browser, die ich getestet habe (Safari, Chrome und Firefox auf Mac in ihren letzten Inkarnationen), die Flagge richtig behandelt, wenn das Bild direkt ohne HTML angezeigt wird.
am
2
Seien Sie vorsichtig damit, da es experimentell ist. Überprüfen Sie die Browserkompatibilität, die für die meisten Browser nicht gut aussieht. Hoffentlich klären sie das irgendwann.
Verlorene Übersetzung
35
Dies ist nicht kompatibel mit den meisten Browsern heute caniuse.com/#search=image-orientation
Gabriel C
2
Warum in aller Welt haben Bilder überhaupt Orientierungsmetadaten? Wenn Sie das Bild wirklich drehen wollten, würden Sie dann nicht einfach um die Pixel verschieben und die Breite gegen die Höhe austauschen?
Jack Giffin
15
Wie hat das so viele positive Stimmen bekommen? Es wird extrem nicht unterstützt und funktioniert nur für Firefox caniuse.com/#search=image-orientation
A Friend
26

Ihr Bild steht tatsächlich auf dem Kopf. Aber es hat ein Meta-Attribut "Orientierung", das dem Betrachter sagt, dass es um 180 Grad gedreht werden soll. Einige Geräte / Viewer befolgen diese Regel nicht.

Öffnen Sie es in Chrome: richtig herum Öffnen Sie es in FF: richtig hoch Öffnen Sie es in IE: verkehrt herum

Öffnen Sie es in Paint: Upside down Öffnen Sie es in Photoshop: Ganz oben. etc.

i-CONICA
quelle
1
Haben Sie eine Idee, wie wir diese verhindern können, bevor der Benutzer das Bild hochlädt? Da dieses Bild direkt vom Benutzer hochgeladen wird, muss ich einen Weg finden, dies zu überwinden
The Lazy Log
Wenn es sich um einen Dienst handelt, der Bilder hostet, sollten Sie die Bilder aus Gründen der Größe, der Dateigröße und der Sicherheit trotzdem neu codieren, damit sie möglicherweise in der neu codierten Version behoben werden.
i-CONICA
Aha. Ich werde einen besseren Weg finden müssen, um damit umzugehen. Vielleicht muss ich das Bild verarbeiten, nachdem es auf S3
The Lazy Log
Sie können die GD-Bibliothek in PHP verwenden.
i-CONICA
5
Eine einfachere Möglichkeit wäre, Orientierungsmetadaten zu entfernen und das Bild umzudrehen. Imagemagick bietet die Funktion convert -autoorient, die dies erledigt.
Saurabheights
19

Wenn Sie Zugriff auf Linux haben, öffnen Sie ein Terminal, cd in das Verzeichnis mit Ihren Images und führen Sie es aus

mogrify -auto-orient *

Dies sollte die Orientierungsprobleme auf allen Bildern dauerhaft beheben.

Paul Chris Jones
quelle
4
Dies hat bei mir funktioniert. Möglicherweise müssen Sie brew install imagemagickauf einem Mac laufen, wenn Siecommand not found: mogrify
Kyle
Bis zum nächsten Bild ... hat es irgendwelche Nachteile?
Harry Bosh
12

Ich habe vergessen, hier meine eigene Antwort hinzuzufügen. Ich habe Ruby on Rails verwendet, daher ist es möglicherweise nicht auf Ihre Projekte in PHP oder anderen Frameworks anwendbar. In meinem Fall habe ich Carrierwave gem zum Hochladen der Bilder verwendet. Meine Lösung bestand darin, der Uploader-Klasse den folgenden Code hinzuzufügen, um das EXIF-Problem vor dem Speichern der Datei zu beheben.

process :fix_exif_rotation
def fix_exif_rotation
  manipulate! do |img|
    img.auto_orient!
    img = yield(img) if block_given?
    img
  end
end
Das faule Protokoll
quelle
1
Gute Antwort, aber wie kann ich diese Methode für vorhandene Bilddateien aufrufen?
Matrix
Sie müssen Versionen neu erstellen. Ich denke, so etwas würde funktionieren: stackoverflow.com/a/9065832/461640
The Lazy Log
11

Speichern als PNG löste das Problem für mich.

Seyed Mostafa Mousavi Kahaki
quelle
1
Diese Lösung ist nur für Bilder nützlich, bei denen es sich nicht um Fotos handelt: "Das JPG-Format ist ein verlustbehaftetes komprimiertes Dateiformat. Dies macht es nützlich, Fotos in einer kleineren Größe als ein BMP zu speichern. JPG ist eine häufige Wahl für die Verwendung im Web, da dies der Fall ist." komprimiert. Zum Speichern von Strichzeichnungen, Text und Symbolgrafiken in einer kleineren Dateigröße sind GIF oder PNG die bessere Wahl, da sie verlustfrei sind. " - labnol.org/software/tutorials/…
Kc Gibson
fantastisch, gelöster Dank
T. Shashwat
2
Gespeichert als PNG, dann wieder zurück zu JPG, das die Dateigröße niedrig hält und die Ausrichtung korrekt speichert, danke.
MDave
10

Diese Antwort baut auf der Antwort von bsap mit Exif-JS auf, basiert jedoch nicht auf jQuery und ist auch mit älteren Browsern ziemlich kompatibel. Das Folgende sind Beispiel-HTML- und JS-Dateien:

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>

drehen.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
quelle
exif-js ist jetzt so veraltet und nicht mehr gewartet, dass es in einigen Umgebungen fehlschlägt, z. B. überall dort, wo der strikte Modus aktiviert ist. Wir brauchen wirklich eine Lösung dafür. Meine App frustriert mich und jeder Workaround, den ich gefunden habe, hat viele Nachteile.
Methodician
9

Sie können Exif-JS verwenden , um die Eigenschaft "Ausrichtung" des Bildes zu überprüfen. Wenden Sie dann nach Bedarf eine CSS-Transformation an.

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

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

Dieses Problem machte mich auch verrückt. Ich habe PHP auf meiner Serverseite verwendet, sodass ich die Lösungen @The Lazy Log (Ruby) und @deweydb (Python) nicht verwenden konnte. Es zeigte mir jedoch die richtige Richtung. Ich habe es mit Imagicks getImageOrientation () auf der Rückseite repariert.

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

Hier ist der Link, wenn Sie mehr lesen möchten. http://php.net/manual/en/imagick.getimageorientation.php

user4504661
quelle
6

Es sind die EXIF-Daten, die Ihr Samsung-Telefon enthält.

Verfolge DeCoy
quelle
1
Ah, das tritt also nur bei den Bildern auf, die mit dem Samsung-Handy aufgenommen wurden?
The Lazy Log
4
Passiert mit mehreren. Ich habe es auch auf iPhones gesehen.
Trace DeCoy
EXIF-Metadaten können Informationen über das Foto selbst (Verschlusszeit, Objektivblende, ISO-Empfindlichkeit, Fokusentfernung usw.), Kontextdaten (Datum, Uhrzeit, Temperatur, Luftfeuchtigkeit) enthalten und die GPS-Koordinaten sowie den gerundeten Drehwinkel enthalten bis zu 90 ° mehrfach. Die überwiegende Mehrheit der heutigen Smartphones und Kameras legt diese Metadaten im EXIF-Block ab, sodass es meiner Meinung nach nur eine Frage der Zeit ist, ob Browser die richtige Bildrotation automatisch anwenden.
ManuelJE
5

Bis CSS: image-orientation:from-image;allgemeiner unterstützt wird, führen wir eine serverseitige Lösung mit Python durch. Hier ist der Kern davon. Sie überprüfen die Exif-Daten auf Orientierung, drehen das Bild entsprechend und speichern es erneut.

Wir bevorzugen diese Lösung gegenüber clientseitigen Lösungen, da keine zusätzlichen Bibliotheken clientseitig geladen werden müssen und dieser Vorgang beim Hochladen von Dateien nur einmal ausgeführt werden muss.

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

Dies geschieht, da die ursprüngliche Ausrichtung des Bildes nicht der Ansicht im Bildbetrachter entspricht. In solchen Fällen wird das Bild im Bildbetrachter vertikal angezeigt, aber tatsächlich horizontal.

Um dies zu beheben, gehen Sie wie folgt vor:

  1. Öffnen Sie das Bild im Bildeditor wie Paint (in Windows) oder ImageMagick (unter Linux).

  2. Bild nach links / rechts drehen.

  3. Speichern Sie das Bild.

Dies sollte das Problem dauerhaft beheben.

Yuvraj Patil
quelle
1

Eine einfache Möglichkeit, das Problem ohne Codierung zu beheben, ist die Verwendung der Funktion "Für Web exportieren" von Photoshop. Im Dialogfeld können Sie auswählen, ob alle oder die meisten EXIF-Daten eines Bildes entfernt werden sollen. Normalerweise behalte ich nur Copyright- und Kontaktinformationen. Da Bilder, die direkt von einer Digitalkamera kommen, für die Webanzeige stark überdimensioniert sind, ist es auch eine gute Idee, sie über Save for the Web zu verkleinern. Für diejenigen, die nicht mit Photoshop vertraut sind, gibt es zweifellos Online-Ressourcen, mit denen Sie die Größe eines Bildes ändern und unnötige EXIF-Daten entfernen können.

AlGator
quelle
4
Wenn Sie jedoch eine Anwendung entwickeln, in der Benutzer ein Bild zum Hochladen auswählen können, wie wird Photoshop in diesem Fall verwendet? :)
The Lazy Log
1

Ich denke, es gibt einige Probleme bei der automatischen Korrektur der Bildausrichtung im Browser. Wenn ich beispielsweise das Bild direkt besuche, wird die richtige Ausrichtung angezeigt, bei einigen Exit-HTML-Seiten jedoch die falsche Ausrichtung.

Kai Zou
quelle
-19

Verwenden Sie externes Styling. Geben Sie im HTML-Blatt dem Tag den Klassennamen. Verwenden Sie im Stylesheet den Punktoperator, dem der Klassenname vorangestellt ist, und schreiben Sie dann den folgenden Code

.rotate180 {
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 transform: rotate(180deg);
 }
msd
quelle
Es ist keine verallgemeinerte Lösung. Funktioniert speziell für das
betreffende