上传时默认情况下正在旋转图像

时间:2017-03-09 18:29:55

标签: javascript jquery css samsung-mobile

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

2 个答案:

答案 0 :(得分:9)

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

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

转身图片

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

convert uploadedImage.jpg -auto-orient turnedImage.jpg

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

答案 1 :(得分:0)

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

拍照时,手机会将所有旋转元数据保存在EXIF标头中。当您将图像上传到服务器时,该元数据仍位于其中,但是将图像应用于图像以旋转图像(如果需要)是您的工作。在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);
        }
    }
}

要按原样使用该功能,只需在保存文件后调用它。有关更多信息和其他PHP解决方案,请参见the original source