Wenn Sie nur das Orientierungs-Tag und nichts anderes möchten und keine weitere große Javascript-Bibliothek readAsArrayBufferhinzufügen möchten, habe ich einen kleinen Code geschrieben, der das Orientierungs-Tag so schnell wie möglich extrahiert (es verwendet DataView und ist in IE10 + verfügbar, aber Sie können schreiben Ihren eigenen Datenleser für ältere Browser):
function getOrientation(file, callback) {
var reader = new FileReader();
reader.onload = function(e) {
var view = new DataView(e.target.result);
if (view.getUint16(0, false) != 0xFFD8)
{
return callback(-2);
}
var length = view.byteLength, offset = 2;
while (offset < length)
{
if (view.getUint16(offset+2, false) <= 8) return callback(-1);
var marker = view.getUint16(offset, false);
offset += 2;
if (marker == 0xFFE1)
{
if (view.getUint32(offset += 2, false) != 0x45786966)
{
return callback(-1);
}
var little = view.getUint16(offset += 6, false) == 0x4949;
offset += view.getUint32(offset + 4, little);
var tags = view.getUint16(offset, little);
offset += 2;
for (var i = 0; i < tags; i++)
{
if (view.getUint16(offset + (i * 12), little) == 0x0112)
{
return callback(view.getUint16(offset + (i * 12) + 8, little));
}
}
}
else if ((marker & 0xFF00) != 0xFF00)
{
break;
}
else
{
offset += view.getUint16(offset, false);
}
}
return callback(-1);
};
reader.readAsArrayBuffer(file);
}
// usage:
var input = document.getElementById('input');
input.onchange = function(e) {
getOrientation(input.files[0], function(orientation) {
alert('orientation: ' + orientation);
});
}
<input id='input' type='file' />
Werte:
-2: not jpeg
-1: not defined
Für Benutzer von Typescript können Sie den folgenden Code verwenden:
export const getOrientation = (file: File, callback: Function) => {
var reader = new FileReader();
reader.onload = (event: ProgressEvent) => {
if (! event.target) {
return;
}
const file = event.target as FileReader;
const view = new DataView(file.result as ArrayBuffer);
if (view.getUint16(0, false) != 0xFFD8) {
return callback(-2);
}
const length = view.byteLength
let offset = 2;
while (offset < length)
{
if (view.getUint16(offset+2, false) <= 8) return callback(-1);
let marker = view.getUint16(offset, false);
offset += 2;
if (marker == 0xFFE1) {
if (view.getUint32(offset += 2, false) != 0x45786966) {
return callback(-1);
}
let little = view.getUint16(offset += 6, false) == 0x4949;
offset += view.getUint32(offset + 4, little);
let tags = view.getUint16(offset, little);
offset += 2;
for (let i = 0; i < tags; i++) {
if (view.getUint16(offset + (i * 12), little) == 0x0112) {
return callback(view.getUint16(offset + (i * 12) + 8, little));
}
}
} else if ((marker & 0xFF00) != 0xFF00) {
break;
}
else {
offset += view.getUint16(offset, false);
}
}
return callback(-1);
};
reader.readAsArrayBuffer(file);
}
Sie können die exif-js- Bibliothek in Kombination mit der HTML5-Datei-API verwenden: http://jsfiddle.net/xQnMd/1/ .
quelle
Firefox 26 unterstützt
image-orientation: from-image: Bilder werden je nach EXIF-Daten im Hoch- oder Querformat angezeigt. (Siehe sethfowler.org/blog/2013/09/13/new-in-firefox-26-css-image-orientation .)Es gibt auch einen Fehler bei der Implementierung in Chrome .
Beachten Sie, dass diese Eigenschaft nur von Firefox unterstützt wird und wahrscheinlich veraltet ist .
quelle
https://github.com/blueimp/JavaScript-Load-Image ist eine moderne Javascript-Bibliothek, die nicht nur das Exif-Orientierungsflag extrahieren, sondern auch JPEG-Bilder auf der Clientseite korrekt spiegeln / drehen kann.
Ich habe gerade das gleiche Problem mit dieser Bibliothek gelöst: JS Client-seitige Exif-Ausrichtung: JPEG-Bilder drehen und spiegeln
quelle
Wenn Sie es browserübergreifend möchten, ist es am besten, es auf dem Server zu tun. Sie könnten eine API haben, die eine Datei-URL verwendet und Ihnen die EXIF-Daten zurückgibt. PHP hat dafür ein Modul .
Dies könnte mit Ajax erfolgen, so dass es für den Benutzer nahtlos ist. Wenn Sie sich nicht für die Cross-Browser-Kompatibilität interessieren und sich auf die Funktionalität von HTML5- Dateien verlassen können, schauen Sie in die Bibliothek JsJPEGmeta , mit der Sie diese Daten in nativem JavaScript abrufen können .
quelle
Schauen Sie sich ein Modul an, das ich geschrieben habe (Sie können es im Browser verwenden) und das die Exif-Ausrichtung in eine CSS-Transformation konvertiert: https://github.com/Sobesednik/exif2css
Es gibt auch dieses Knotenprogramm zum Generieren von JPEG-Fixtures mit allen Ausrichtungen: https://github.com/Sobesednik/generate-exif-fixtures
quelle
Ich lade den Erweiterungscode hoch, um das Foto mit der Android-Kamera auf HTML wie gewohnt auf einem IMG-Tag mit der richtigen Rotation anzuzeigen, insbesondere für IMG-Tags, deren Breite breiter als die Höhe ist. Ich weiß, dass dieser Code hässlich ist, aber Sie müssen keine anderen Pakete installieren. (Ich habe den obigen Code verwendet, um den Exif-Rotationswert zu erhalten. Danke.)
und dann verwenden wie
quelle
Ich habe Alis Antwort von früher verbessert / um weitere Funktionen erweitert und in Typescript eine util-Methode erstellt, die meinen Anforderungen für dieses Problem entspricht. Diese Version gibt die Drehung in Grad zurück, die Sie möglicherweise auch für Ihr Projekt benötigen.
Verwendung:
quelle