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

Question

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

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

当我尝试上传用 iphone 相机拍摄的照片时出现问题。 1- 如果我从 iphone 上传图片，它在 preview/crop 模式下显示方向正确，然后在 php 上传后我看到错误方向的结果。

2-如果我上传用iphone用电脑拍的照片，在preview/crop模式下照片显示方向错误（垂直照片旋转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 没有代码来适应这个（虽然它可能应该），我使用了一个解决方案，我将图像上传到服务器 first，更正旋转并使用服务器端代码更新 exif。

所以上传流程是这样的：

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

当然，这只有在上传图像的 exif 方向数据准确的情况下才有效。

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

Jcrop incorrect orientation from Iphone upload, how i can do?

php

ios

jcrop