web-dev-qa-db-fra.com

Les images sont pivotées par défaut lors du téléchargement

J'essaie de prendre une photo et de la télécharger dans mon application à l'aide de Samsung S7. Mais l'image pivote lors du téléchargement. Même si je sélectionne également l'image dans la galerie, elle est tournée lors du téléchargement. Y a-t-il quelque chose que nous pouvons corriger à partir du code jquery. Veuillez suggérer. Merci d'avance

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

Lorsque vous tournez votre téléphone pour prendre des photos, la lumière frappe le capteur de l'appareil photo dans l'orientation lorsque vous tenez le téléphone. L'application appareil photo n'enregistre pas les images tournées telles que vous les voyez à l'écran, mais elle les marque simplement avec les données d'orientation EXIF du capteur d'orientation.

Ces informations sont interprétées par votre application de galerie pour afficher l'image en conséquence, mais un navigateur l'ignore et affiche les photos telles qu'elles ont été prises par la perspective des capteurs.

Retourner les images:

Vous pouvez tourner et enregistrer les images selon les données EXIF ​​sur un serveur avec imagemagick auto-orient :

convert uploadedImage.jpg -auto-orient turnedImage.jpg

Ou tournez-les avec JavaScript sur le client avec le script exif-orient ou avec jQuery comme expliqué dans ce post .

10
Fabian Horlacher

Il s'agit d'une alternative native PHP à la solution ImageMagick:

Lorsque vous prenez une photo, votre téléphone enregistre toutes les métadonnées de rotation dans les en-têtes EXIF. Lorsque vous téléchargez l'image sur votre serveur, ces métadonnées sont toujours là, mais c'est votre travail de l'appliquer à l'image pour la faire pivoter (si vous le souhaitez). Dans PHP vous pouvez utiliser une fonction appelée 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);
        }
    }
}

Pour utiliser la fonction telle quelle, appelez-la simplement après avoir enregistré le fichier. Pour plus d'informations et une solution supplémentaire PHP solution voir la source d'origine .

0
galki