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

Posted 2023-02-25

【中文标题】Iphone上传的Jcrop方向不正确，我该怎么办？

【英文标题】：Jcrop incorrect orientation from Iphone upload, how i can do?

【发布时间】：2016-03-16 11:30:49

【问题描述】：

我有一个网站，我的 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 相关的问题吗？如果没有其他裁剪工具不受此错误影响？

【问题讨论】：

如果您将图像上传到服务器上，然后（使用浏览器）打开它，方向是否正确？如果不是，那么 iPhone 就是原因。

是的，如果我将图像上传到我的服务器中的 iphone，然后我用浏览器打开它，我会看到正确的方向

【参考方案1】：

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

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

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

所以上传流程是这样的：

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

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