Determina l'orientamento delle foto in JavaScript?

Question

Stiamo utilizzando FileReader per ottenere un'immagine, da una foto scattata su un iPhone, nel browser. Quindi utilizziamo drawImage() per disegnare quell'immagine su canvas. Il problema è che le foto scattate su un display iPhone ruotato sulla pagina. Non possiamo riprodurlo su nessun dispositivo Android.

Possiamo ruotare l'immagine sullo canvas abbastanza facilmente ma come possiamo determinare la rotazione richiesta? Abbiamo provato alcune librerie di lettura EXIF ​​per JavaScript (exif.js) ma non siamo stati in grado di leggere correttamente l'orientamento.

Answer 1

Ok, quindi sembra che tu di fatto possa leggere i dati exif utilizzando exif.js.

$("input").change(function() { 
    var file = this.files[0]; 
    fr = new FileReader; 

    fr.onloadend = function() { 
     var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result)); 
     alert(exif.Orientation); 
    }; 

    fr.readAsBinaryString(file); 
}); 

Questo codice utilizza exif.js e binaryajax.js.

Questo funziona ma solo se lo provi con una foto scattata su ios. Penso che Android ruoti solo l'immagine reale e l'orientamento sia sempre 1, quindi non scrivono nemmeno l'orientamento di exif. Quindi siamo stati ingannati nel pensare che non stava funzionando.

Per le immagini che hanno l'orientamento, il valore è leggibile e può essere interpretato come di seguito (quelli sono F di btw):

1  2  3  4   5   6   7   8 

888888 888888  88 88  8888888888 88     88 8888888888 
88   88  88 88  88 88  88 88   88 88  88 88 
8888  8888 8888 8888 88   8888888888 8888888888   88 
88   88  88 88 
88   88 888888 888888 

Answer 2

Funziona alla grande anche senza binaryajax.js

Basta usare

EXIF.getData(changeEvent.target.files[0], function() { 
    alert(EXIF.pretty(this));        
}); 

Anche here si potrebbe vedere un altro esempio.

Answer 3

O se volete semplicemente il tag Orientamento:

EXIF.getData(file, function() { 
    alert(this.exifdata.Orientation); 
}); 

Answer 4

miei due centesimi è che il quadro Exif-js non funziona per me e non è necessaria.

invece quello che puoi fare è 'onload' della tua immagine src, creare una tela, quindi disegnare la tua sovrastampa di tela dell'immagine, ciò che ciò comporta è sbarazzarsi di qualsiasi rotazione relativa all'exif dell'immagine dell'iPhone, perché la tela drawImage cancella i dati exif.

quando il pareggio è completa, vedrete la vostra immagine 'ruotare' di nuovo a come apparirebbe in un browser PC