2016-03-16 3 views
2

У меня есть сайт моего jCrop инструмент, создать этот поток:Неправильная ориентация Jcrop от загрузки Iphone, как я могу это сделать?

пользователей загружать фотографии-> они подрезать IT-> они загрузить его на моем сервере

Проблемы приходит, когда я пытаюсь загрузить ту фотографию, сделанную из камера 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? Если нет, есть другой инструмент для обрезки, который не влияет на эту ошибку?

+0

Если вы загружаете изображение на свой сервер, а затем открываете его (в своем браузере), правильная ориентация? Если нет, то причиной является iPhone. –

+0

да, если я загружу изображение, вызванное iphone на моем сервере, а затем я открою его в браузере, я вижу правильную ориентацию – user31929

ответ

0

iPhones управляют изображениями в браузере, используя данные ориентации exif. Поэтому, если у вас есть изображение, физически находящееся в ландшафтном режиме (например, на сервере, ширина> высота), но изображение было снято с помощью iphone в портретной ориентации, оно будет использовать тег для поворота изображения в браузере на iphone. (на настольных браузерах этого не произойдет)

Это то, что вызывает проблемы для jCrop.

Поскольку у jCrop не было подходящего кода (хотя, вероятно, это должно произойти), я использовал решение, в котором я загружаю изображение на сервер сперва, исправьте поворот и обновите exif с использованием кода на стороне сервера ,

Так поток загрузки, как это:

  1. пользователь выбирает и добавление фото, чтобы сервер как есть
  2. когда загрузка представляет, создать копию изображения, которая физически повернута к ориентации указанных в данных exif, и обеспечить соответствующее обновление данных exif. (например, если exif первоначально указывал на 90 градусов поворота CW, я делаю это вращение и обновляю exif, чтобы он больше не указывал это вращение).
  3. , когда страница перезагружается после отправки, я показываю рабочее пространство jCrop с новой версией образ.

Конечно, это работает только в том случае, если данные ориентации exif из загруженного изображения точны.