Как автоматически развернуть картинку на стороне клиента использую js?

Question

[Prosspa]

Добрый день, столкнулся с задачей, голову уже битый час ломаю.
Задача простая, развернуть картинку. Но на практике не все так просто как кажется.

К примеру, пользователь загрузил картинку которая повернута в любую из сторон (Вот кратко)

Я использую библиотеку для этой цели
Когда загружаю картинки, большая половина картинок не имеют тех данных что мне нужно (ориентация).
Либа сама уже может развернуть картинку как нужно. Но и тут я не пойму как и что куда нужно правильно передать, что бы она развернула как нужно? Я смотрел либу ее исходники, но так и не понял как правильно все сделать.

Но не могу понять в целом, как правильно сделать это все что бы оно работало как нужно? Подскажите плиз если кто сталкивался с таким?

Comments

[ThunderCat]

Answer 1

[Prosspa]

Короче какой вывод.

Есть явные проблемы с определением ориентации. Я все перепробовал что можно было, абсолютно.
Даже использовал нейронку GoogleVision для поворота, но потом как понял с этого запроса на гул от тако го же бедняги как и я...
(https://issuetracker.google.com/issues/35903522)
Нейронка не умеет определять позицию картинки, по крайней мере щас. Эта тема уже длится 4 года и все ни как не сделают эту функцию. Последний комментарий там был 15 июля, который гласит что метода нету.

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

так вот. Этот параметр очень сильно зависит от аппарата на который было сделано фото. Что это значит, на андроиде и более старых версиях устройство, этот параметр игнорируется. На айфонах ставит не точно или вовсе не ставит (тестировал на своих X и 6s). Как раз таки те фото что у меня есть (ВУ водил) у большинства нету exif и определить какая щас ориентация у картинки попросту не возможно...

Я использовал вот еще этот момент, описал php логику, но результат все тот же что и на js
(https://stackoverflow.com/questions/3657023/how-to...)
Но опять же, это все зависит от параметра exif, которого просто может не быть.

Так же я пробовал загружать картинку через canvas что бы определить ориентацию.
Потом полез в код вот этой библиотеки (https://github.com/blueimp/JavaScript-Load-Image/b...)
Я тут все перелопатил и тут же снова все зависит от параметра exif...
Логика построена на основе вот этой информации https://www.impulseadventure.com/photo/exif-orient...

https://developer.mozilla.org/en-US/docs/Web/CSS/i...
Есть еще вот такой метод, но он во первых поддерживается только FireFox. Во вторых использует exif (как там помечено). В третих он Deprecated

Вывод: Из всего что я вижу, на текущий момент времени технологии не могут позволить точно определить ориентацию картинки. Как бы мы ни хотели нету ни методов которые точно могли бы определить картинку. Ни алгоритмов которые могли бы этот вопросы решить.

Я думаю что кому то эта информацию пригодится.

Answer 2

[ThunderCat]

Задача простая, развернуть картинку.

Для чего? Что с ней дальше предполагается делать?

К примеру, пользователь загрузил картинку которая повернута в любую из сторон

На сервер? В инпут? Куда?

Когда загружаю картинки, (куда?) большая половина картинок не имеют тех данных что мне нужно (ориентация).

Логично, не все устройства их пишут, а при конвертации и пережатии чаще всего ексиф трется для сокращения размера.

Либа сама уже может развернуть картинку как нужно. Но и тут я не пойму как и что куда нужно правильно передать, что бы она развернула как нужно?

читать доку?

Comments

[Prosspa]

Загружать потом на сервер. Но перед этим показать на фронте в превью уже развернутую.
И что значит в инпут?) это дефолтная процедура) (как по мне вода)

Если exif cтирается я это уже понял, вопрос стоит в том как определить тогда картинку если она не имеет exif, потому и акцентировал что не имеют. Но не спросил почему они не имею exif?

Я уже всю раскурил, я вроде описал что использую и что ознакомился с кодом а соотвественно с докой, зачем еще раз показывать?)

Я вроде еще вот такую информацию скинул, точно тоже что и ты показал по доке Тык

Я просто спросил совета и кто сталкивался с такой задачей?

Я так понял ты не сталкивался...

[ThunderCat]

Загружать потом на сервер. Но перед этим показать на фронте в превью уже развернутую.
И что значит в инпут?) это дефолтная процедура) (как по мне вода)

Есть масса способов отобразить картинку, по этому вопрос вполне понятен - откуда? Клиент загружает, картинки берутся с сервера, с другого ресурса, из строннего апи...

Я вроде еще вот такую информацию скинул, точно тоже что и ты показал по доке

Ты значит разницы не видишь, да? Ничего что ты прикрепил ссылку для СОЗДАНИЯ поля ексиф, а не для чтения?

Я просто спросил совета и кто сталкивался с такой задачей?

Ну я сталкивался, правда использовал серверную библиотеку, которая +- работала.

Вообще мало понимаю зачем такие извращения - просто добавь 2 стрелки - повернуть вправо/влево, ну или еще перевернуть. Все, пользователь развернул картинку сам, а ты запомнил в скрытом инпуте положение поворота. При загрузке верти как хочешь, можешь сразу на фронте, можешь после загрузки на бэке.

[Prosspa]

бессмысленный спор)

[ThunderCat]

Prosspa, А тут нету спора, просто прими как факт - ексиф не выход, нужно человеческое решение. И внимательно читать доку, чтобы не путать функции записи с функциями чтения. А то что ты хреново описываешь задачу - вообще не обсуждается, но это скорее неопытность...

[Prosspa]

ThunderCat, ага)