Если вам нужен только тег ориентации и ничего больше и вы не хотите включать еще одну огромную библиотеку javascript, я написал небольшой код, который извлекает тег ориентации как можно быстрее (он использует DataView и readAsArrayBufferкоторые доступны в IE10 +, но вы можете написать ваш собственный считыватель данных для старых браузеров):
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' />
ценности:
-2: not jpeg
-1: not defined
Для тех, кто использует Typescript, вы можете использовать следующий код:
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);
}
Вы можете использовать библиотеку exif-js в сочетании с API файлов HTML5: http://jsfiddle.net/xQnMd/1/ .
источник
Firefox 26 поддерживает
image-orientation: from-image: изображения отображаются в книжной или альбомной ориентации, в зависимости от данных EXIF. (См. Sethfowler.org/blog/2013/09/13/new-in-firefox-26-css-image-orientation .)Также есть ошибка для реализации этого в Chrome .
Помните, что это свойство поддерживается только Firefox и, скорее всего, станет устаревшим .
источник
https://github.com/blueimp/JavaScript-Load-Image - это современная библиотека javascript, которая может не только извлекать флаг ориентации exif, но и правильно отображать / поворачивать изображения JPEG на стороне клиента.
Я только что решил ту же проблему с этой библиотекой: JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images
источник
Если вы хотите кроссбраузерность, лучше всего сделать это на сервере. У вас может быть API, который принимает URL-адрес файла и возвращает вам данные EXIF; В PHP есть модуль для этого .
Это можно сделать с помощью Ajax, чтобы пользователю было удобно. Если вас не волнует кроссбраузерная совместимость и вы можете полагаться на функциональность файлов HTML5 , загляните в библиотеку JsJPEGmeta , которая позволит вам получить эти данные в собственном JavaScript.
источник
Посмотрите на модуль, который я написал (вы можете использовать его в браузере), который преобразует ориентацию exif в преобразование CSS: https://github.com/Sobesednik/exif2css
Также существует эта программа узла для создания фикстур JPEG со всеми ориентациями: https://github.com/Sobesednik/generate-exif-fixtures
источник
Я загружаю код расширения, чтобы показать фотографию с камеры Android в html как обычно на каком-то теге img с правильным вращением, особенно для тега img, ширина которого шире, чем высота. Я знаю, что этот код уродлив, но вам не нужно устанавливать другие пакеты. (Я использовал приведенный выше код для получения значения поворота exif, спасибо.)
а затем используйте, например,
источник
Улучшение / добавление дополнительных функций к ответу Али из ранее, я создал метод util в Typescript, который соответствует моим потребностям для этой проблемы. Эта версия возвращает вращение в градусах, которое также может понадобиться для вашего проекта.
Использование:
источник