Iphone上传的Jcrop方向不正确，我该怎么办？

Question

我有一个网站，我的 jCrop 工具可以创建这个流程：

用户上传照片->他们裁剪它->他们上传到我的服务器上

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

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

我试图用 php 删除 exif，但问题仍然存在，因为错误的方向是由 exif 和 JCrop 管理的。这是我的 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 相关的问题吗？如果没有其他裁剪工具不受此错误影响？

Answer 1

iPhone 使用 exif 方向数据在浏览器中处理图像。因此，如果您的图像在物理上处于横向模式（例如，在服务器上，宽度 > 高度）但图像是使用 iphone 纵向拍摄的，它将使用标签在 iphone 的浏览器中旋转图像。 （在桌面浏览器上不会发生这种情况）

这就是给 jCrop 带来麻烦的原因。

因为 jCrop 没有代码来适应这种情况（尽管它可能应该），我使用了一个解决方案，我将图像上传到服务器首先，更正旋转并更新 exif使用服务器端代码。

所以上传流程是这样的：

1. 用户按原样选择照片并将其上传到服务器
2. 当上传提交时，我创建了一个图像的副本，该图像物理旋转到 exif 数据中指示的方向，并确保 exif 数据相应地更新。 （例如，如果 exif 最初指示 90 度顺时针旋转，我会进行该旋转，并更新 exif 使其不再指示此旋转）
3. 当页面在提交后重新加载时，我会显示带有新版本图像的 jCrop 工作区。

当然，这只有在上传图片中的 exif 方向数据准确时才有效。