Jcrop неправильная ориентация из загрузки Iphone, как я могу сделать?
У меня есть сайт мой инструмент jCrop, который создает этот поток:
пользователи загружают фотографии -> они обрезают это -> они загружают это на мой сервер
Проблемы возникают, когда я пытаюсь загрузить фотографию, снятую с камеры iphone.
1- Если я загружаю изображение с iphone, оно выглядит правильно ориентированным в режиме предварительного просмотра / обрезки, затем после загрузки php я вижу результат в неправильной ориентации.
2- Если я загружаю снимок, сделанный с помощью iphone, на компьютер, изображение кажется неправильно ориентированным (вертикальная фотография поворачивается на 90 градусов) в режиме предварительного просмотра / кадрирования.
Я пытался удалить exif с помощью php, но проблема остается, потому что exif и JCrop управляют неправильной ориентацией. Это мой Jcrop init:
// initialize Jcrop
$('#preview').Jcrop({
minSize: [167, 125], // min crop size
maxSize: [1500, 1125], // max crop size// min crop size
aspectRatio : 500/375, // keep aspect ratio 1:1
bgFade: true, // use fade effect
bgOpacity: .3, // fade opacity
boxWidth: 600,
onChange: updateInfoFoto,
onSelect: updateInfoFoto
}, function(){
// use the Jcrop API to get the real image size
var boundsFoto = this.getBounds();
boundxFoto = boundsFoto[0];
boundyFoto = boundsFoto[1];
// Store the Jcrop API in the jcrop_api_foto variable
jcrop_api_foto = this;});
Есть способ решить эту проблему, связанную с iphone? Если нет, то есть еще один инструмент кадрирования, который не затронут этой ошибкой?
Решение
iPhone управляет изображениями в браузере, используя данные ориентации exif. Таким образом, если у вас есть изображение, которое физически находится в альбомном режиме (например, на сервере, ширина> высота), но изображение было снято с iphone в портретной ориентации, он будет использовать тег для поворота изображения в браузере на iphone. (в настольных браузерах этого не произойдет)
Это то, что вызывает проблемы для jCrop.
Поскольку у jCrop нет кода для этого (хотя, вероятно, он должен), я использовал решение, в котором я загружаю изображение на сервер первый, исправьте поворот и обновите exif, используя код на стороне сервера.
Таким образом, поток загрузки выглядит так:
- пользователь выбирает и загружает фото на сервер как есть
- Когда отправка отправляется, я создаю копию изображения, которое физически поворачивается в направлении, указанном в данных exif, и гарантирую, что данные exif обновляются соответствующим образом. (например, если exif первоначально указал вращение на 90 градусов по часовой стрелке, я делаю это вращение и обновляю exif, чтобы оно больше не указывало на это вращение)
- когда страница перезагружается после отправки, я показываю рабочую область jCrop с новой версией изображения.
Конечно, это работает, только если данные ориентации exif из загруженного изображения являются точными.
Другие решения
Других решений пока нет …