默认情况下，上传后图像会被旋转。

Question

我试图使用三星S7拍照并将其上传到我的应用程序中。但是图片在上传时被旋转了。即使我也从相册中选择图片，它也会在上传时被旋转。有没有什么可以从jquery代码中修复的东西？请建议。先感谢您。

<div class="photo-div" id="photo">
                <img id="uploadimage" src="" hidden="">
            </div>

<label id="files-label" for="files" class=" myprofile-btn-bold">Replace Image</label>
<input id="files" style="display:none;" type="file" accept="image/*" onchange="readURL(this);">

JQuery：

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#files-label').html('Replace Image');
            $('.photo-image').removeClass('photo-image');
            $('#uploadimage').attr('src', e.target.result);
            $("#headshot-message").hide();
            $("#headshot-cancel").hide();
            $('#noimage-label').addClass('hidden');
        }

        reader.readAsDataURL(input.files[0]);
    }
}

- Manideep Yechuri

---

嗨@maksymiuk，请查看更新后的问题。如果您需要更多信息，请告诉我。 - Manideep Yechuri

jQuery非常简单，我没有发现任何会导致图像旋转的问题。您是上传到服务器还是在将e.target.result附加到#uploadimage元素时图像旋转？ - KFE

既然这只发生在您的手机上，您是否尝试将该图像复制到计算机中，并查看图像是否正确旋转。有时手机会将照片旋转以适应手机屏幕，但原始照片可能仍然没有旋转。如果您的后端代码中没有旋转内容，我认为JavaScript代码也不会引起问题。 - serdar.sanri

@guyfawkes，我也在三星S6上检查了一下，发现它的行为不同。拍照并上传时会被旋转，但是当我们尝试从图库中选择图像时，它却正常工作。这是设备方向本身的问题吗？ - Manideep Yechuri

很可能是。 - serdar.sanri

Answer 1

当你翻转手机拍照时，光线会以你握住手机的方向照射到相机传感器上。相机应用程序不会保存屏幕上所见的照片翻转后的图像，而是仅使用当前EXIF方向数据标记它们的方向传感器。

这些信息由你的相册应用程序解释，以相应的方式显示图像，但浏览器会忽略它并按传感器角度拍摄的原始图片显示。 翻转图片： 你可以使用ImageMagick auto-orient在服务器上根据EXIF数据旋转和保存图片。

convert uploadedImage.jpg -auto-orient turnedImage.jpg

或者使用exif-orient脚本在客户端上旋转它们，或者如此文章中所解释的那样，使用jQuery进行旋转。

- Fabian Horlacher

---

对于大尺寸的图像，它运行良好，但是在添加此实现后，小尺寸的图像会被旋转，而之前并没有发生这种情况。 - Manideep Yechuri

你使用了哪种实现，JQuery还是ImageMagick？你能检查一下这些小图像是否设置了正确的方向标志，就像大图像一样吗？你可以使用这个网站：http://exif-viewer.com/ - Fabian Horlacher

使用了 JQuery。 - Manideep Yechuri

console.log('Exif=', EXIF.getTag(this, "Orientation")); 的输出是什么？HTML 中是否添加了 rotate-[x] 类？另外，使用诸如“Chrome 移动开发工具”之类的工具进行调试。 - Fabian Horlacher

嗨@Fabian，第一次方向没问题。但是当更换不同方向的图像时，仍然显示以前的图像方向。请建议需要做什么。 - Manideep Yechuri

你能在JSFiddle上发布一个带有你自己图片的例子吗？ - Fabian Horlacher

Answer 2

这是一个原生PHP替代ImageMagick解决方案：

当你拍照时，你的手机会将任何旋转元数据保存在EXIF头中。当你上传图像到服务器时，那些元数据仍然存在，但是你需要应用它们来旋转图像（如果你想要的话）。在PHP中，你可以使用一个叫做exif_read_data的函数：

function correctImageOrientation($filename)
{
    $exif = exif_read_data($filename);
    if ($exif && isset($exif['Orientation'])) {
        $orientation = $exif['Orientation'];
        if ($orientation != 1) {
            $img = imagecreatefromjpeg($filename);
            $deg = 0;
            switch ($orientation) {
                case 3:
                    $deg = 180;
                    break;
                case 6:
                    $deg = 270;
                    break;
                case 8:
                    $deg = 90;
                    break;
            }
            if ($deg) {
                $img = imagerotate($img, $deg, 0);
            }
            imagejpeg($img, $filename, 95);
        }
    }
}

要使用原样的功能，只需在保存文件后调用它即可。有关更多信息和额外的PHP解决方案，请参见原始来源。

- galki

---

这实际上是一个很好的解决方案。谢谢你分享。 - Dmitry Gordienko