Como ajustar a orientação de uma imagem para mostrar a visualização adequada da imagem?

Eu desenvolvi um aplicativo da web laravel que tem a função de aceitar imagens enviadas pelos usuários e depois exibi-las. Eu havia encontrado um problema durante o teste, pois as fotos carregadas usando telefones celulares giravam 90 graus no sentido anti-horário. Usei a intervenção de imagem para resolver esse problema. Mas como eu estou mostrando uma visualização da imagem carregada para os usuários usando javascript, as imagens são giradas 90 graus, mas quando eu salvo a imagem, ela se torna adequada. Meu código javascript é

    function imagePreview(input,elm) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $(elm).css("background-image","url('"+e.target.result+"')");
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#settings_img").on("change",function(){
        imagePreview(this,"#settings_img_elm");
    });

alguém pode me ajudar a orientar adequadamente a imagem de visualização editando o código acima para que a orientação da imagem seja alterada quando necessário.

Que tal apenas girar a imagem com CSS?

reader.onload = function (e) {
    $(elm).css({
        "background-image":"url('"+e.target.result+"')",
        "transform": "rotate(90deg)"
    });
}

Edit: Bem, depois de um breve mergulho no mundo dos dados EXIF, acho que posso ter uma solução para você. Peguei emprestada a função getOrientation () de Ali , como sugeriu o @Nick, e corrigi a orientação com CSS da seguinte maneira:

function correctOrientation(element, orientation){
    switch (orientation) {
      case 2: $(element).css("transform", "scaleX(-1)");
        break;
      case 3: $(element).css("transform", "rotate(180deg)");
        break;
      case 4: $(element).css("transform", "rotate(180deg) scaleX(-1)");
        break;
      case 5: $(element).css("transform", "rotate(-90deg) scaleX(-1)");
        break;
      case 6: $(element).css("transform", "rotate(90deg)");
        break;
      case 7: $(element).css("transform", "rotate(90deg) scaleX(-1)");
        break;
      case 8: $(element).css("transform", "rotate(-90deg)");
        break;
      default: break;
    }
}

violino

E se você precisar de arquivos de exemplo para testá-lo, obtenha-os aqui .

Edit: Posicionando a imagem carregada em uma imagem <img>de fundo da div: https://jsfiddle.net/ynzvtLe2/2/

Isso deve funcionar. Aqui, obtenho a orientação original do arquivo de imagem e, em seguida, construo uma tela com a correção de rotação apropriada. Em seguida, definimos a imagem girada corretamente como visualização.

function imagePreview(input,elm) {
    // image file
    var file = input.files[0]; 

    if (!file.type.match('image/jpeg.*')) {
        // image is not a jpeg, do something?
    }

    var reader = new FileReader();
    reader.onload = function(e) {
        var exif = piexif.load(e.target.result);
        var image = new Image();
        image.onload = function () {
            //get original orientation of the uploaded image
            var orientation = exif["0th"][piexif.ImageIFD.Orientation];

            // Build a temperory canvas to manipulate image to required orientation
            var canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            var ctx = canvas.getContext("2d");
            var x = 0;
            var y = 0;
            ctx.save();
            if (orientation == 2) {
                x = -canvas.width;
                ctx.scale(-1, 1);
            } else if (orientation == 3) {
                x = -canvas.width;
                y = -canvas.height;
                ctx.scale(-1, -1);
            } else if (orientation == 4) {
                y = -canvas.height;
                ctx.scale(1, -1);
            } else if (orientation == 5) {
                canvas.width = image.height;
                canvas.height = image.width;
                ctx.translate(canvas.width, canvas.height / canvas.width);
                ctx.rotate(Math.PI / 2);
                y = -canvas.width;
                ctx.scale(1, -1);
            } else if (orientation == 6) {
                canvas.width = image.height;
                canvas.height = image.width;
                ctx.translate(canvas.width, canvas.height / canvas.width);
                ctx.rotate(Math.PI / 2);
            } else if (orientation == 7) {
                canvas.width = image.height;
                canvas.height = image.width;
                ctx.translate(canvas.width, canvas.height / canvas.width);
                ctx.rotate(Math.PI / 2);
                x = -canvas.height;
                ctx.scale(-1, 1);
            } else if (orientation == 8) {
                canvas.width = image.height;
                canvas.height = image.width;
                ctx.translate(canvas.width, canvas.height / canvas.width);
                ctx.rotate(Math.PI / 2);
                x = -canvas.height;
                y = -canvas.width;
                ctx.scale(-1, -1);
            }
            ctx.drawImage(image, x, y);
            ctx.restore();

            var dataURL = canvas.toDataURL("image/jpeg", 1.0);

            // set the preview image to your element
            $(elm).css("background-image","url('"+dataURL+"')");
        };
        image.src = e.target.result;
    };

    reader.readAsDataURL(file);

}


$("#settings_img").on("change",function(){
    imagePreview(this,"#settings_img_elm");
});

Certifique-se de incluir esta biblioteca primeiro: https://github.com/hMatoba/piexifjs

Eu recebi ajuda da documentação: https://readthedocs.org/projects/piexif/downloads/pdf/latest/