Определить ориентацию фотографий в JavaScript?

Мы используем FileReader, чтобы получить изображение с фотографии, сделанной на iPhone, в браузере. Затем мы используем drawImage(), чтобы нарисовать это изображение на a canvas. Проблема в том, что фотографии, сделанные на экране iPhone, повернуты на странице. Мы не можем воспроизвести это на любых устройствах Android.

Мы можем легко поворачивать изображение на canvas, но как мы можем определить требуемое вращение? Мы попробовали некоторые библиотеки EXIF для чтения JavaScript (exif.js), но не смогли успешно прочитать ориентацию.

Ответ 1

Итак, похоже, что вы действительно можете читать exif-данные с помощью 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);
});

Этот код использует exif.js и binaryajax.js.

Это работает, но только если вы попробуете его с фотографией, сделанной на ios. Я думаю, что андроид просто вращает фактическое изображение, и ориентация всегда 1, поэтому они даже не выписывают ориентацию на exif. Поэтому мы были обмануты, думая, что он не работает.

Для изображений, имеющих ориентацию, значение читается и может быть интерпретировано как указано ниже (это F 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

Ответ 2

Отлично работает даже без binaryajax.js

Просто используйте

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

Также здесь вы можете увидеть другие примеры.

Ответ 3

Или, если вам нужен только тег Orientation:

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

Ответ 4

мои два цента - это то, что инфраструктура exif-js не работает для меня и не требуется.

вместо того, что вы можете сделать, это "onload" вашего изображения src, создать холст, а затем нарисовать верхнюю часть вашего изображения поверх вашего изображения, что это значит - избавиться от любого связанного с iphone поворота изображения "exif", поскольку холст drawImage стирает данные exif.

когда ничья завершена, вы увидите, что ваше изображение "повернуть" обратно, как оно будет выглядеть в браузере ПК