iOS 6 Safari 图片上传 - 方向错误

Question

我已经创建了一个Web应用程序，可以让你从浏览器上传照片。在iOS 6中使用时，即使上传的照片是竖向拍摄的，它们似乎最终都会呈现为横向方向。我是否需要进行一些服务器端检查来修正照片的方向，或者是否有某种iOS特定属性/JavaScript可以应用于上传表单来解决这个问题？

更新

根据要求，这里是我编写的代码。前提是我正在使用PHP和WideImage库（这只是一个更大脚本的片段，如果你喜欢，你可以使用其他图像处理工具）。

// Load Image Into Wide Image
$image=WideImage::load(IMG_UPLOAD_DIR.$result['name']);
$exif=exif_read_data(IMG_UPLOAD_DIR.$result['name']);
$orientation=$exif['Orientation'];
$result['orientation']=$orientation;

// Use Wide Image To Resize Images
$full=$image->resize(IMG_FULL_H,IMG_FULL_H);
$thumb=$image->resize(IMG_THUMB_W,IMG_THUMB_H);

switch($orientation){
    case 2:
        $full->mirror()->saveToFile(IMG_UPLOAD_DIR.$result['name'], 90);
        $thumb->mirror()->saveToFile(IMG_UPLOAD_DIR.$thumbName, 90);
        break;

    case 3:
        $full->rotate(-180)->saveToFile(IMG_UPLOAD_DIR.$result['name'], 90);
        $thumb->rotate(-180)->saveToFile(IMG_UPLOAD_DIR.$thumbName, 90);
        break;

    case 4:
        $full->rotate(180)->mirror()->saveToFile(IMG_UPLOAD_DIR.$result['name'], 90);
        $thumb->rotate(180)->mirror()->saveToFile(IMG_UPLOAD_DIR.$thumbName, 90);
        break;

    case 5:
        $full->rotate(90)->mirror()->saveToFile(IMG_UPLOAD_DIR.$result['name'], 90);
        $thumb->rotate(90)->mirror()->saveToFile(IMG_UPLOAD_DIR.$thumbName, 90);
        break;

    case 6:
        $full->rotate(90)->saveToFile(IMG_UPLOAD_DIR.$result['name'], 90);
        $thumb->rotate(90)->saveToFile(IMG_UPLOAD_DIR.$thumbName, 90);
        break;

    case 7:
        $full->rotate(-90)->saveToFile(IMG_UPLOAD_DIR.$result['name'], 90);
        $thumb->rotate(-90)->saveToFile(IMG_UPLOAD_DIR.$thumbName, 90);
        break;

    case 8:
        $full->rotate(-90)->saveToFile(IMG_UPLOAD_DIR.$result['name'], 90);
        $thumb->rotate(-90)->saveToFile(IMG_UPLOAD_DIR.$thumbName, 90);
        break;

    default:
        $full->saveToFile(IMG_UPLOAD_DIR.$result['name'], 90);
        $thumb->saveToFile(IMG_UPLOAD_DIR.$thumbName, 90);
        break;
}

- edcs

Answer 1

检查图片的exif元数据，iPhone相机拍摄的图像会“旋转”。

- A-Live

---

谢谢 - 我获取了 exif 元数据并在我的图像调整脚本中添加了一些额外的代码，现在我完成了 :) - edcs

我认为用于此代码的代码应在这个答案/问题中分享。 - eladleb

@eladleb 我认为这是一个没有普适解决方案的单独问题。如果您有关于读取exif数据的特定问题，请继续提出新问题。 - A-Live

我会将我的代码添加到这个问题的答案中，因为它太长了，无法添加到评论中... - edcs

@edcs 谢谢，详细的问题描述总是受欢迎的。对于那些没有使用PHP或WideImage但可能遇到类似问题的人，请在理解问题来源后立即创建一个单独的问题。 - A-Live

非常感谢您在问题中添加了修复。这为我节省了大量时间。 - evanmcd

Answer 2

您可以尝试这个 jQuery 插件（在本主题的底部）。

{{link1：IOS6和Safari照片上传 - 文件API +画布+ jQuery Ajax异步上传和调整文件大小}}

- bardu

Answer 3

作为对 A-Live 回答的扩展：

如果您正在使用 Ruby，则 RMagick 有一个 auto_orient 方法。从文档中可以看到：

旋转或翻转图像，基于图像的 EXIF 方向标记。请注意，只有一些现代数码相机型号可以使用方向标记标记图像。如果图像没有方向标记，或者图像已经正确定位，则 auto_orient 返回图像的精确副本。

- Johannes

Answer 4

值得注意的是，将您的图像通过Cloudinary运行可以解决这个问题。

在通过该服务之前，我用iPhone拍摄的照片在桌面上似乎会旋转（看起来没有原因）。

一旦位于Cloudinary URL后面，使用任何图像转换功能，图像将以正确的方向返回。

我正在使用他们的付费服务，但似乎他们有一个免费层级。

- couzzi