@Prosspa

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

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

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

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

Но не могу понять в целом, как правильно сделать это все что бы оно работало как нужно? Подскажите плиз если кто сталкивался с таким?
  • Вопрос задан
  • 80 просмотров
Решения вопроса 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

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

Я думаю что кому то эта информацию пригодится.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
ThunderCat
@ThunderCat
{PHP, MySql, HTML, JS, CSS} developer
Задача простая, развернуть картинку.
Для чего? Что с ней дальше предполагается делать?

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы