Il tag img mostra un orientamento errato

142

Ho un'immagine a questo link: http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg

Come puoi vedere, questa è un'immagine normale con l'orientamento corretto. Tuttavia, quando imposto questo collegamento sull'attributo src del mio tag immagine, l'immagine diventa capovolta. http://jsfiddle.net/7j5xJ/

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

Hai idea di cosa stia succedendo?

html  css  image 
— The Lazy Log
fonte
In Firefox è sottosopra in entrambi i casi. Penso che Chrome sia abbastanza intelligente da ruotarlo automaticamente in base alle informazioni EXIF.
— dfsq,
Hmm davvero? Nel mio firefox, l'originale è ancora normale e l'immagine in img è sottosopra.
— The Lazy Log,
1
Penso che l'immagine stessa sia sottosopra e cloudfrontpotrebbe ruotarla nella pagina. Potresti forzare una rotazione tramite CSS jsfiddle.net/7j5xJ/1
— Kevin Lynch,
2
regex.info/… Ha Orientation: Rotate 180in EXIF.
— dfsq,
1
Si tratta di un problema con i metadati fotografici che specifica l'orientamento. Non so perché il tag immagine non tenga conto di questo. Non ho ancora trovato buone risposte ...
— Chet,

Risposte:

91

Ho trovato parte della soluzione. Le immagini ora hanno metadati che specificano l'orientamento della foto. C'è una nuova specifica CSS perimage-orientation .

Basta aggiungere questo al tuo CSS:

img {
    image-orientation: from-image;
}

Secondo le specifiche al 25 gennaio 2016, Firefox e iOS Safari (dietro un prefisso) sono gli unici browser che supportano questo. Riscontro ancora problemi con Safari e Chrome. Tuttavia, Safari mobile sembra supportare l'orientamento in modo nativo senza il tag CSS.

Suppongo che dovremo aspettare e vedere se i browser inizieranno a supportare image-orientation.

— Chet
fonte
3
I browser stranamente testati (Safari, Chrome e Firefox su Mac nelle loro recenti incarnazioni) gestiscono correttamente il flag quando l'immagine viene visualizzata direttamente senza HTML attorno.
— e l'
2
Attento a questo in quanto è sperimentale. Controlla la compatibilità del browser non sembra buona per la maggior parte dei browser. Spero che lo risolveranno ad un certo punto.
— lostintranslation il
35
Questo non è compatibile con la maggior parte dei browser oggi caniuse.com/#search=image-orientation
— Gabriel C
2
Perché nel mondo le immagini hanno persino metadati di orientamento? Se davvero volessi ruotare l'immagine, non ti sposteresti semplicemente attorno ai pixel e cambi la larghezza con l'altezza?
— Jack Giffin,
15
In che modo ha ottenuto così tanti voti positivi? È estremamente non supportato e non funziona per nulla oltre a firefox caniuse.com/#search=image-orientation
— A Friend
26

La tua immagine è in realtà sottosopra. Ma ha un meta-attributo "Orientamento" che dice allo spettatore che dovrebbe essere ruotato di 180 gradi. Alcuni dispositivi / visualizzatori non rispettano questa regola.

Aprilo in Chrome: verso l'alto Aprilo in FF: verso l'alto Aprilo in IE: sottosopra

Aprilo con Paint: capovolto Aprilo con Photoshop: A destra. eccetera.

— i-CONICA
fonte
1
Hai idea di come possiamo prevenirle prima che l'utente carichi l'immagine? Dato che questa immagine viene caricata direttamente dall'utente, quindi devo trovare un modo per superarla
— The Lazy Log
Se è per un servizio che ospiterà immagini, è meglio ricodificare le immagini comunque, per motivi di dimensioni, dimensione dei file e sicurezza, quindi questo potrebbe risolverli nella versione ricodificata.
— i-CONICA,
Vedo. Dovrò trovare un modo migliore per gestirlo. Forse dovrei elaborare l'immagine dopo che è stata caricata su S3
— The Lazy Log il
Puoi usare la libreria GD in PHP.
— i-CONICA,
5
Un modo più semplice sarebbe rimuovere i metadati di orientamento e capovolgere l'immagine. Imagemagick fornisce la funzione convert -autoorient che lo farà.
— saurabheights
19

Se hai accesso a Linux, apri un terminale, cd nella directory contenente le tue immagini ed esegui

mogrify -auto-orient *

Ciò dovrebbe risolvere in modo permanente i problemi di orientamento su tutte le immagini.

— Paul Chris Jones
fonte
4
Questo ha funzionato per me, potrebbe essere necessario eseguire brew install imagemagicksu Mac se ottienicommand not found: mogrify
— Kyle
Fino alla prossima immagine .. ha degli aspetti negativi?
— Harry Bosh,
12

Ho dimenticato di aggiungere la mia risposta qui. Stavo usando Ruby on Rails, quindi potrebbe non essere applicabile ai tuoi progetti in PHP o in altri framework. Nel mio caso, stavo usando la gemma Carrierwave per caricare le immagini. La mia soluzione era quella di aggiungere il seguente codice alla classe uploader per risolvere il problema EXIF ​​prima di salvare il file.

process :fix_exif_rotation
def fix_exif_rotation
  manipulate! do |img|
    img.auto_orient!
    img = yield(img) if block_given?
    img
  end
end
— The Lazy Log
fonte
1
buona risposta, ma come posso chiamare questo metodo su un file immagine esistente?
— Matrix
Devi ricreare le versioni. Immagino che qualcosa del genere funzionerebbe: stackoverflow.com/a/9065832/461640
— The Lazy Log
11

salva come png risolto il problema per me.

— Seyed Mostafa Mousavi Kahaki
fonte
1
Questa soluzione è utile solo per le immagini che non sono fotografie: "Il formato JPG è un formato di file compresso con perdita di dati. Questo lo rende utile per la memorizzazione di fotografie di dimensioni inferiori rispetto a un BMP. JPG è una scelta comune per l'uso sul Web perché è compresso. Per l'archiviazione di disegni al tratto, testo e grafica iconica con file di dimensioni inferiori, GIF o PNG sono scelte migliori perché sono senza perdita di dati. " - labnol.org/software/tutorials/…
— Kc Gibson
fantastico, risolto grazie
— T. Shashwat,
2
L'ho salvato come PNG, quindi di nuovo su JPG che mantiene basse le dimensioni del file e ha salvato l'orientamento correttamente, grazie.
— MDave,
10

Questa risposta si basa sulla risposta di bsap usando Exif-JS , ma non si basa su jQuery ed è abbastanza compatibile anche con i browser più vecchi. Di seguito sono riportati i file html e js di esempio:

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
fonte
exif-js è ora così obsoleto e non mantenuto che fallisce in alcuni ambienti, come in qualsiasi luogo in cui è abilitata la modalità rigorosa. Abbiamo davvero bisogno di una soluzione per questo. La mia app è frustrante per me e ogni soluzione che ho trovato ha ampi lati negativi.
— Metodista
9

È possibile utilizzare Exif-JS per verificare la proprietà "Orientamento" dell'immagine. Quindi applicare una trasformazione CSS se necessario.

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

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

Anche questo problema mi stava facendo impazzire. Stavo usando PHP sul mio server, quindi non ero in grado di usare le soluzioni @The Lazy Log (ruby) e @deweydb (python). Tuttavia mi ha indicato la giusta direzione. L'ho riparato sul retro usando getImageOrientation () di 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); 
} 
?>

Ecco il link se vuoi leggere di più. http://php.net/manual/en/imagick.getimageorientation.php

— user4504661
fonte
6

Sono i dati EXIF ​​incorporati nel tuo telefono Samsung.

— Traccia DeCoy
fonte
1
Ah, quindi questo si verifica solo con le immagini scattate dal telefono Samsung?
— The Lazy Log,
4
Succede con diversi. L'ho visto anche su iPhone.
— Traccia DeCoy il
I metadati EXIF ​​possono includere informazioni sulla fotografia stessa (velocità dell'otturatore, apertura dell'obiettivo, sensibilità iso, distanza di messa a fuoco, ecc.), Dati di contesto (data, ora, temperatura, umidità) e possono contenere le coordinate GPS e l'angolo di rotazione arrotondato fino a 90 ° multipli. La stragrande maggioranza degli smartphone e delle fotocamere di oggi inserisce questi metadati nel blocco EXIF, quindi IMHO è solo una questione di tempo che i browser applicano automaticamente la corretta rotazione dei frame.
— ManuelJE,
5

Fino a CSS: image-orientation:from-image;è più universalmente supportato stiamo realizzando una soluzione lato server con Python. Ecco il senso. Si controlla l'orientamento dei dati exif, quindi si ruota l'immagine di conseguenza e si salva nuovamente.

Preferiamo questa soluzione rispetto alle soluzioni lato client in quanto non richiede il caricamento di librerie extra lato client e questa operazione deve avvenire solo una volta al caricamento dei file.

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

Succede poiché l'orientamento originale dell'immagine non è come vediamo nel visualizzatore di immagini. In tali casi, l'immagine viene mostrata in verticale a noi nel visualizzatore di immagini, ma in realtà è orizzontale.

Per risolvere questo, procedi come segue:

  1. Apri l'immagine nell'editor di immagini come paint (in Windows) o ImageMagick (in Linux).

  2. Ruota l'immagine a sinistra / a destra.

  3. Salva l'immagine.

Questo dovrebbe risolvere il problema in modo permanente.

— Yuvraj Patil
fonte
1

Un modo semplice per risolvere il problema, senza codifica, è utilizzare la funzione di esportazione Save for Web di Photoshop. Nella finestra di dialogo si può scegliere di rimuovere tutti o la maggior parte dei dati EXIF ​​di un'immagine. Di solito conservo solo il copyright e le informazioni di contatto. Inoltre, poiché le immagini che provengono direttamente da una fotocamera digitale sono notevolmente sovradimensionate per la visualizzazione Web, è comunque consigliabile ridimensionarle tramite Salva per il Web. Per coloro che non sono esperti di Photoshop, non ho dubbi sul fatto che ci siano risorse online per ridimensionare un'immagine e rimuoverla da eventuali dati EXIF ​​non necessari.

— AlGator
fonte
4
Ma se stai sviluppando un'applicazione in cui gli utenti possono scegliere qualsiasi immagine da caricare, come utilizzare Photoshop in quel caso? :)
— The Lazy Log,
1

Penso che ci siano alcuni problemi nell'orientamento dell'immagine della correzione automatica del browser, ad esempio, se visito direttamente l'immagine, mostra l'orientamento giusto, ma mostra l'orientamento errato in alcune pagine HTML delle uscite.

— Kai Zou
fonte
-19

Usa uno stile esterno. nel foglio html dare il nome della classe al tag. nel foglio di stile usa l'operatore punto preceduto dal nome della classe e quindi scrivi il seguente codice

.rotate180 {
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 transform: rotate(180deg);
 }
— MSD
fonte
Non è una soluzione generalizzata. Funzionerà specificamente sull'immagine fornita in questione
— th3pirat3
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.