上传时默认旋转图像答案

【问题标题】：Images are being rotated by default upon upload上传时默认旋转图像
【发布时间】：2017-03-09 18:29:54
【问题描述】：

我正在尝试拍照并使用三星 S7 将其上传到我的应用程序中。但是图像在上传时正在旋转。即使我也从图库中选择图像，它也会在上传时旋转。我们可以从 jquery 代码中修复什么。请建议。提前致谢

HTML：

<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]);
    }
}

【问题讨论】：

我们能看一下代码 sn-p 看看你是如何上传的吗？
嗨@maksymiuk，请查看更新后的问题。如果您需要更多，请告诉我
jquery 非常简单，对我来说没有什么特别突出的会导致图像旋转。当您将 e.target.result 附加到 #uploadimage 元素时，您是上传到服务器还是旋转图像？
@KFE，在上传过程中，图像正在旋转
因为它只发生在您的手机上，您是否尝试将该图像复制到您的计算机中并查看图像是否正确旋转。有时手机可以旋转照片以适应手机屏幕，但原始照片可能仍然不是。如果您的后端代码中没有任何需要轮换的内容，我看不出有任何东西会在 js 代码中导致它。

标签： javascript jquery css samsung-mobile

【解决方案1】：

当您转动手机拍照时，光线会在您握住手机时照射方向上的相机传感器。相机应用程序不会保存您在屏幕上看到的图像，而是使用来自方向传感器的当前EXIF orientation data 标记它们。

您的图库应用会解释此信息以相应地显示图像，但浏览器会忽略它并显示传感器视角拍摄的照片。

翻转图像：

imagemagick auto-orient可以根据EXIF数据将图片转存到服务器上：

convert uploadedImage.jpg -auto-orient turnedImage.jpg

或者使用exif-orient Script 或jQuery 中的this post 中的说明在客户端上使用JavaScript 来打开它们。

【讨论】：

它适用于大尺寸图像，但是在添加此实现后小尺寸图像正在旋转，这在以前没有发生。
您使用了哪个实现，JQuery 还是 ImageMagick？您能否检查这些小图像是否将正确的方向标志设置为大图像？您可以使用这个网站：exif-viewer.com
用过的JQuery一个
console.log('Exif=', EXIF.getTag(this, "Orientation")); 的输出是什么（-> 参见示例）？是否在 HTML 中添加了 rotate-[x] 类？顺便提一句。使用“Chrome Mobile DevTools”等工具进行调试
嘿@Fabian，方向第一次很好。但是当改变不同方向的图像时，它仍然显示以前的图像方向。请提出需要做什么。

【解决方案2】：

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

当您拍照时，您的手机会将所有旋转元数据保存在 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 解决方案，请参阅the original source。

【讨论】：

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