Ориентация изображения при получении исходного изображения с помощью readAsDataURL

Я не могу найти ни одного примера использования FileReader.readAsDataURL и показать результирующее изображение в контейнере с правильной ориентацией изображения.

Все портретные изображения, поступающие с моей камеры и устройств iPhone, имеют эту проблему. Только портретные фотографии, сохраненные с помощью Adobe Photoshop, похоже, не имеют этой проблемы.

Вот один из примеров системы, который я нашел в Интернете. Мой код очень похож: http://www.onlywebpro.com/demo/file_reader/reader01.html

Обратите внимание, что при загрузке этой фотографии она загружается в ландшафтном режиме: http://www.rafaelsanches.com/IMG_3786.JPG

Обратите внимание, что изображение фактически отображается в альбомной ориентации при использовании браузера для его загрузки. Когда вы сохраняете его на диск и открываете с помощью Finder, он отображается в портретной ориентации. (Вероятно, искатель умен, чтобы использовать информацию exif)

Используя exif.js, я обнаружил, что пример изображения имеет ориентацию = 8. Фотографии, сохраненные с помощью фотошопа, имеют ориентацию = 1.

Теперь, ребята, как вы предлагаете мне это сделать? Должен ли я рисовать его на холсте и вращать в зависимости от информации exif? У кого-нибудь есть хороший учебник по этому поводу? Кто-нибудь сталкивался с этой проблемой раньше?


javascript image html filereader orientation
person Rafael Sanches    schedule 05.03.2012    source источник
comment
На данный момент мне нужно было создать инструмент поворота на веб-странице. Пользователь должен вращать вручную. Я считаю, что можно прочитать поворот exif, а затем автоматически повернуть, но обработка 10 МБ jpg с exif.js очень медленная, поэтому я пока не рассматриваю.   -  person Rafael Sanches    schedule 15.03.2012

Ответы (1)


arrow_upward
0
arrow_downward

У меня действительно была эта проблема сегодня, и я решил ее ...

После строки из примера, где создается изображение...

Это то, что я сделал

var image = $(".uploaded");
                var img = new Image();

                img.src = e.target.result;

                if (img.complete) { // was cached
                    if (img.height < img.width) {
                        $(image).addClass("landscape").removeClass("portrait");

                    }
                    else {
                        $(image).addClass("portrait").removeClass("landscape");
                    }


                }
                else { // wait for decoding
                    img.onload = function () {
                        if (img.height < img.width) {
                            $(image).addClass("landscape").removeClass("portrait");

                        }
                        else {
                            $(image).addClass("portrait").removeClass("landscape");
                        }
                    }
                }
person Miguel Esquirol    schedule 16.11.2017