Javascript 默认情况下，图像在上载时进行旋转

我正在尝试拍摄一张照片，并使用三星S7将其上传到我的应用程序中。但上传时图像正在旋转。即使我也从gallery中选择图像，它也会在上传时旋转。有什么我们可以从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);">

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

---

当您转动手机拍照时，当您握住手机时，光线会照射方向上的摄像头传感器。摄像头应用程序不会保存在屏幕上看到的图像，但它只是用方向传感器的电流来标记图像

您的gallery应用程序会解释此信息以相应地显示图像，但浏览器会忽略此信息，并显示传感器拍摄的图片

翻转图像：

<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);">

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

您可以根据EXIF数据在服务器上通过以下方式打开并保存图片：

---

或者在客户端上使用JavaScript或jQuery打开它们，如中所述。

这是ImageMagick解决方案的本机PHP替代方案：

拍照时，手机会将所有旋转元数据保存在EXIF标题中。当您将图像上载到服务器时，该元数据仍然存在，但您的工作是将其应用到图像以旋转它（如果您愿意）。在PHP中，您可以使用一个名为：

函数correctImageOrientation（$filename）
{
$exif=exif\u读取数据（$filename）；
if（$exif&&isset（$exif['Orientation']））{
$orientation=$exif['orientation']；
如果（$orientation！=1）{
$img=imagecreatefromjpeg（$filename）；
$deg=0；
开关（$方向）{
案例3：
$deg=180；
打破
案例6：
$deg=270；
打破
案例8：
$deg=90；
打破
}
如果（$deg）{
$img=imagerotate（$img，$deg，0）；
}
imagejpeg（$img，$filename，95）；
}
}
}

---

要按原样使用函数，只需在保存文件后调用它。有关更多信息和其他PHP解决方案，请参阅。

我们可以看一段代码片段，看看您是如何上传的吗？您好@maksymiuk，请查找更新的问题。请让我知道，如果你需要任何更多的jquery是非常简单的，没有什么真正突出我会导致图像旋转。您是否正在上载到服务器，或者在将e.target.result附加到#uploadimage元素时图像是否旋转？@KFE，在上载过程中，图像正在旋转，因为它只发生在您的手机上，您是否尝试将该图像复制到您的计算机中，并查看图像是否正确旋转。有时手机可以旋转照片以适应手机屏幕，但原始照片可能仍然不适合。如果您的后端代码中没有任何可旋转的内容，我看不到任何东西会导致js代码中出现这种情况。对于大尺寸的图像，它可以正常工作，但是在添加此实现后，小尺寸的图像会被旋转，这在之前没有发生。您使用了哪个实现，JQuery或ImageMagick？你能检查一下这些小图像是否有正确的方向标志设置为大图像吗？你可以使用这个网站：used JQuery oneconsole.log（'Exif='，Exif.getTag（这个“方向”）的输出是什么（>参见示例）？是否将

rotate-[x]

类添加到HTML中？顺便说一句，使用诸如“Chrome Mobile DevTools”之类的工具来调试Hey@Fabian，方向第一次很好。但是当改变不同方向的图像时，它仍然显示以前的图像方向。请建议需要做什么。这实际上是一个很好的解决方案。谢谢分享。