编程语言
首页 > 编程语言> > javascript – 上传后默认旋转图片

javascript – 上传后默认旋转图片

作者:互联网

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

解决方法:

当您转动手机拍照时,当您拿着手机时,指示灯会在方向上照射到相机传感器上.相机应用程序不会保存在屏幕上看到的图像,但它只是用方向传感器的当前EXIF orientation data标记它们.

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

转身图片:

您可以根据服务器上的EXIF数据转换并保存图片,使用imagemagick auto-orient

convert uploadedImage.jpg -auto-orient turnedImage.jpg

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

标签:javascript,jquery,css,samsung-mobile
来源: https://codeday.me/bug/20191006/1861433.html