wake-up-neo.net

Das img-Tag zeigt die falsche Ausrichtung an

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

Wie Sie sehen, handelt es sich um 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"/>

Hast du eine Idee, was los ist?

107
The Lazy Log

Ich habe vergessen, meine eigene Antwort hier hinzuzufügen. Ich habe Ruby on Rails) verwendet, sodass es möglicherweise nicht auf Ihre Projekte in PHP oder anderen Frameworks anwendbar ist In diesem 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
12
The Lazy Log

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ür image-orientation .

Fügen Sie dies einfach zu Ihrem CSS hinzu:

img {
    image-orientation: from-image;
}

Laut 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 Ausrichtung ohne das CSS-Tag nativ zu unterstützen.

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

77
Chet

Ihr Bild ist tatsächlich verkehrt herum. Aber es hat ein Meta-Attribut "Orientierung", das dem Betrachter mitteilt, dass es um 180 Grad gedreht werden soll. Einige Geräte/Zuschauer halten sich nicht an diese Regel.

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

Öffnen Sie es in Paint: Auf den Kopf gestellt Öffnen Sie es in Photoshop: Richtig nach oben. usw.

22
i-CONICA

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. Die folgenden Beispiele sind 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>

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";
            }
        });
};
6
VMQ

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

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

6
Trace DeCoy

Dieses Problem hat mich auch verrückt gemacht. Ich habe PHP auf meiner Serverseite verwendet, daher konnte ich die Lösungen @The Lazy Log (Ruby) & @deweydb (Python) nicht verwenden. Es hat mich jedoch in die richtige Richtung geführt. Ich habe das Problem behoben es auf der Rückseite mit Imagick getImageOrientation ().

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

5
user4504661

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

Bis CSS: image-orientation:from-image; wird allgemeiner unterstützt, wir machen eine serverseitige Lösung mit Python. Hier ist der Kern davon. Sie überprüfen die Exif-Daten auf Ausrichtung, drehen das Bild dann 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 nur einmal beim Hochladen von Dateien 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)
4
deweydb

Wenn Sie Zugriff auf Linux haben, öffnen Sie ein Terminal, wechseln Sie in das Verzeichnis, in dem sich Ihre Bilder befinden, und führen Sie es aus

mogrify -auto-orient *

Dadurch sollten die Ausrichtungsprobleme für alle Bilder dauerhaft behoben werden.

2
Paul Jones

Eine einfache Möglichkeit, das Problem ohne Codierung zu beheben, ist die Verwendung der Exportfunktion von Photoshop zum Speichern für das Web. Im Dialogfeld können Sie festlegen, dass alle oder die meisten EXIF-Daten eines Bildes entfernt werden. Normalerweise behalte ich nur Copyright- und Kontaktinformationen. Da Bilder, die direkt von einer Digitalkamera stammen, für die Web-Anzeige stark überdimensioniert sind, ist es eine gute Idee, sie über "Für das Web speichern" 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.

1
AlGator

Ich denke, es gibt einige Probleme bei der automatischen Ausrichtung des Browsers. Wenn ich beispielsweise das Bild direkt aufrufe, wird die richtige Ausrichtung angezeigt, in einigen HTML-Seiten wird jedoch die falsche Ausrichtung angezeigt.

0
Kai Zou

Dies geschieht, weil die ursprüngliche Ausrichtung des Bilds nicht mit der im Bildbetrachter übereinstimmt. In solchen Fällen wird das Bild im Bildbetrachter vertikal, in Wirklichkeit jedoch horizontal angezeigt.

Um dies zu beheben, gehen Sie wie folgt vor:

  1. Öffne das Bild in einem Bildeditor wie Paint (in Windows) oder ImageMagick (in Linux).

  2. Bild nach links/rechts drehen.

  3. Speichern Sie das Bild.

Dies sollte das Problem dauerhaft beheben.

0
Yuvraj Patil