javascript - 图片在上传时默认旋转

Question

我正在尝试使用三星 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

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

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

翻转图像:

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

convert uploadedImage.jpg -auto-orient turnedImage.jpg

或者使用 exif-orient Script 在客户端上用 JavaScript 转换它们或使用 jQuery，如 this post 中所述.