从Iphone上传Jcrop不正确的方向,我怎么办?

我有一个网站我的jCrop工具,创build此stream程:

用户上传照片 – >他们裁剪 – >他们上传在我的服务器上

问题来了,当我尝试tu上传从iPhone相机拍摄的照片。 1-如果我从iPhone上传的图片,它显示正确的预览/裁剪模式,然后在php上传后,我看到了一个错误的方向的结果。

2-如果我通过电脑上传了用iphone拍摄的照片,照片在预览/剪裁模式下显示的方向错误(垂直照片旋转了90度)。

我试图删除exif与PHP,但问题仍然存在,因为错误的方向是由exif和JCroppipe理。 这是我的Jcrop初始化:

// 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相关的问题? 如果没有另一个不受这个bug影响的裁剪工具?

iPhone使用Exif方向数据在浏览器中操作图像。 所以如果你有一个物理的横向模式的图像(例如在服务器上,宽度>高度),但是图像是用纵向方向的iphone拍摄的,它将使用标签在iphone上的浏览器中旋转图像。 (在桌面浏览器上,这不会发生)

这是jCrop的麻烦。

由于jCrop没有代码来适应这个(尽pipe它可能应该),我已经使用了一个解决scheme,我首先上传图像到服务器,更正旋转和使用服务器端代码更新exif。

所以上传stream程是这样的:

  1. 用户按原样select并上传照片到服务器
  2. 当上传提交时,我创build了一个物理旋转到exif数据中指示的方向的图像副本,并确保exif数据相应地更新。 (例如,如果exif最初表示90度CW旋转,我做那个旋转,并且更新exif,以便它不再指示这个旋转)
  3. 当页面在提交后重新加载时,我用新版本的图像显示jCrop工作区。

当然,这只有在来自上传图像的exif取向数据准确的情况下才有效。