图片在默认情况下会在上传时旋转 [英] Images are being rotated by default upon upload

问题描述

我正在尝试拍照，并使用Samsung S7将其上传到我的应用程序中.但是图像在上传时会旋转.即使我也从图库中选择图像，它在上载时也会旋转.有什么可以通过jquery代码解决的吗?请提出建议.预先感谢

I am trying to take a photo and upload the same into my application using Samsung S7. But the image is being rotated upon upload. Even if I am selecting the image from gallery also, it is being rotated upon upload. Is there anything that we can fix from jquery code. Please suggest. Thanks in advance

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

推荐答案

当您旋转手机拍照时，当您握住手机时，光线会朝着方向对准摄像头传感器.相机应用程序不会保存您在屏幕上看到的图像，而是仅使用当前 EXIF方向数据.

When you turn around your phone to take pictures, the light strikes the camera sensor on the orientation as you hold the phone. The camera app does not save images turned as you see them on the screen, but it just flags them with the current EXIF orientation data from the orientation sensor.

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

This information is interpreted by your gallery app to show the image accordingly, but a browser ignores it and shows the pictures as they were taken by the sensors perspective.

转过图像:

您可以使用 imagemagick自动定向:

convert uploadedImage.jpg -auto-orient turnedImage.jpg

或使用 exif-orient脚本在客户端上使用JavaScript启用它们或这篇文章中所述使用jQuery.

Or turn them with JavaScript on the client with the exif-orient Script or with jQuery as explained in this post.

这篇关于图片在默认情况下会在上传时旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！