web-dev-qa-db-ja.com

アップロード時に画像がデフォルトで回転されます

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]);
    }
}
javascriptjquerycsssamsung-mobile
13
Manideep Yechuri

スマートフォンを回転させて写真を撮ると、スマートフォンをかざすと、光がカメラセンサーの方向に当たります。カメラアプリは、画面に表示されるように回転した画像を保存しませんが、方向センサーからの現在の EXIF方向データ でフラグを立てるだけです。

この情報は、それに応じて画像を表示するようにギャラリーアプリによって解釈されますが、ブラウザーはそれを無視し、センサーパースペクティブによって撮影された画像を表示します。

画像の向きを変える：

imagemagick auto-orient を使用して、サーバー上のEXIFデータに従って画像を回転および保存できます。

convert uploadedImage.jpg -auto-orient turnedImage.jpg

または、クライアントのJavaScriptで exif-orient Script を使用するか、jQueryを使用して この投稿 で説明されているようにそれらを有効にします。

10
Fabian Horlacher

これは、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ソリューションについては 元のソース を参照してください。

0
galki