图片在上传时默认旋转

Question

我正在尝试使用 Samsung 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]);
    }
}

Answer 1

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

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

翻转图像：

您可以根据服务器上的EXIF数据转存图片imagemagick auto-orient:

convert uploadedImage.jpg -auto-orient turnedImage.jpg

或者在客户端用 exif-orient Script or with jQuery as explained in this post.

用 JavaScript 来打开它们

Answer 2

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

拍照时，phone 会在 EXIF headers 中保存任何旋转元数据。当您将图像上传到您的服务器时，该元数据仍然存在，但您的工作是将它应用到图像以旋转它（如果您愿意）。在 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);
        }
    }
}

要使用函数 as-is，只需在保存文件后调用它即可。有关详细信息和其他 PHP 解决方案，请参阅 the original source。

图片在上传时默认旋转

Images are being rotated by default upon upload

javascript

css

jquery

samsung-mobile