Jeśli chcesz tylko znacznika orientacji i nic więcej i nie lubisz dołączać kolejnej ogromnej biblioteki javascript, napisałem mały kod, który wyodrębnia znacznik orientacji tak szybko, jak to możliwe (używa DataView i readAsArrayBuffer
które są dostępne w IE10 +, ale możesz pisać własny czytnik danych dla starszych przeglądarek):
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' />
wartości:
-2: not jpeg
-1: not defined
Dla tych, którzy używają Typescript, możesz użyć następującego kodu:
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);
}
Możesz użyć biblioteki exif-js w połączeniu z interfejsem API plików HTML5: http://jsfiddle.net/xQnMd/1/ .
źródło
Firefox 26 obsługuje
image-orientation: from-image
: obrazy są wyświetlane pionowo lub poziomo, w zależności od danych EXIF. (Zobacz sethfowler.org/blog/2013/09/13/new-in-firefox-26-css-image-orientation .)Istnieje również błąd umożliwiający zaimplementowanie tego w Chrome .
Pamiętaj, że ta właściwość jest obsługiwana tylko przez przeglądarkę Firefox i prawdopodobnie zostanie wycofana .
źródło
https://github.com/blueimp/JavaScript-Load-Image to nowoczesna biblioteka javascript, która nie tylko może wyodrębnić flagę orientacji exif - może również poprawnie odbić / obrócić obrazy JPEG po stronie klienta.
Właśnie rozwiązałem ten sam problem z tą biblioteką: JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images
źródło
Jeśli chcesz, aby działała w różnych przeglądarkach, najlepiej jest zrobić to na serwerze. Możesz mieć interfejs API, który pobiera adres URL pliku i zwraca dane EXIF; PHP ma do tego moduł .
Można to zrobić za pomocą Ajax, aby było to bezproblemowe dla użytkownika. Jeśli nie zależy Ci na kompatybilności z różnymi przeglądarkami i możesz polegać na funkcjonalności pliku HTML5 , zajrzyj do biblioteki JsJPEGmeta , która pozwoli ci uzyskać te dane w natywnym JavaScript.
źródło
Sprawdź moduł, który napisałem (możesz go używać w przeglądarce), który konwertuje orientację exif na transformację CSS: https://github.com/Sobesednik/exif2css
Istnieje również ten program węzłowy do generowania urządzeń JPEG ze wszystkimi orientacjami: https://github.com/Sobesednik/generate-exif-fixtures
źródło
Przesyłam kod rozszerzenia, aby pokazać zdjęcie z aparatu Android w html jak zwykle na jakimś tagu img z prawą rotacją, szczególnie dla tagu img, którego szerokość jest większa niż wysokość. Wiem, że ten kod jest brzydki, ale nie musisz instalować żadnych innych pakietów. (Użyłem powyższego kodu, aby uzyskać wartość rotacji exif, dziękuję.)
a następnie użyj takich jak
źródło
Poprawiając / dodając więcej funkcjonalności do odpowiedzi Ali z wcześniejszej, stworzyłem metodę util w skrypcie Typescript, która odpowiadała moim potrzebom w tym problemie. Ta wersja zwraca obrót w stopniach, który może być również potrzebny w projekcie.
Stosowanie:
źródło