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

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

4 голосов
/ 06 марта 2012

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

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

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

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

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

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

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

1 Ответ

0 голосов
/ 17 ноября 2017

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

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

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

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");
                        }
                    }
                }
...