Question

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

用户上传照片 - ＆gt;他们裁剪 - ＆gt;他们将其上传到我的服务器上

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

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

我试图用php删除exif，但问题仍然存在，因为错误的方向是由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相关的问题吗？如果不是，还有另一个不受此错误影响的裁剪工具？

Answer 1

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

这是导致jCrop出现问题的原因。

因为jCrop没有适合此的代码（尽管可能应该这样），我使用了一个解决方案，我将图像上传到服务器第一个，更正轮换和更新exif使用服务器端代码。

所以上传流程是这样的：

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

当然，只有来自上传图像的exif方向数据准确无误，才有效。

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

1 个答案: