¿Cómo ajustar la orientación de una imagen para mostrar una vista previa adecuada de la imagen?

8

ingrese la descripción de la imagen aquíingrese la descripción de la imagen aquíingrese la descripción de la imagen aquíHe desarrollado una aplicación web laravel que tiene la función de aceptar imágenes cargadas por los usuarios y luego mostrarlas. Me encontré con un problema durante las pruebas, ya que las fotos cargadas usando teléfonos móviles giraban 90 grados en sentido antihorario. Utilicé la intervención de imágenes para resolver ese problema. Pero como estoy mostrando una vista previa de la imagen cargada a los usuarios que usan JavaScript, las imágenes se rotan 90 grados, pero cuando guardo la imagen se vuelve correcta. Mi código javascript es

    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");
    });

¿Alguien puede ayudarme a orientar correctamente la imagen de vista previa editando el código anterior para que la orientación de la imagen cambie cuando sea necesario.

Jeffrin Jose
fuente
probé esos códigos pero no pude obtener un resultado adecuado, soy nuevo en desarrollo web y, por lo tanto, quiero que alguien edite mi código por mí @ Nick
Jeffrin Jose

Respuestas:

4

¿Qué tal simplemente girando la imagen con CSS?

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

Editar: Bueno, después de una breve inmersión en el mundo de los datos EXIF, creo que podría tener una solución para usted. Tomé prestada la función getOrientation () de Ali , como sugirió @Nick, y luego simplemente corregí la orientación con CSS de la siguiente manera:

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;
    }
}

violín

Y si necesita archivos de ejemplo para probarlo, consígalos aquí .


Editar: Colocar la imagen cargada en una imagen de fondo en <img>lugar de la div: https://jsfiddle.net/ynzvtLe2/2/

cada cosa
fuente
El problema con esto es que hay teléfonos que previsualizan la imagen con la orientación adecuada, por lo tanto, css rotate se
meterá
Ok, edité mi respuesta. Por favor inténtalo.
cada
solo quiero saber cómo poner esto en mi código, soy nuevo en este campo, ¿podría poner este código en el código dado anteriormente en la pregunta
Jeffrin Jose
@JeffrinJose Sí, hermano. Yo lo hice. Simplemente vaya aquí jsfiddle.net/n5sm7ucf/1 y copie todo desde el cuadro de JavaScript. (Reemplace su código JS con eso). Oh, también necesitará el CSS. Sin embargo, puede usar jQuery para agregar eso mediante programación si realmente lo desea, tal como lo hizo en su función 'imagePreview'.
cada
@JeffrinJose Si todavía estás atrapado, @ yo.
cada
2

Esto debería funcionar. Aquí obtengo la orientación original del archivo de imagen y luego construyo un lienzo con la corrección de rotación adecuada. Luego configuramos la imagen rotada correctamente como vista previa.

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");
});

Asegúrese de incluir esta biblioteca primero: https://github.com/hMatoba/piexifjs

Obtuve ayuda de la documentación: https://readthedocs.org/projects/piexif/downloads/pdf/latest/

Sapnesh Naik
fuente
si sustituyo este código en mi archivo javascript en lugar del código anterior, ¿funcionará todo correctamente?
Jeffrin Jose
1
@Jeffrin Jose Sí. Por favor, intente eso
Sapnesh Naik
Lo intenté pero la imagen de vista previa no es visible
Jeffrin Jose
¿Hay algún otro factor que pueda estar afectando esto
Jeffrin Jose
@JeffrinJose ¿incluiste la biblioteca correctamente?
Sapnesh Naik