web-dev-qa-db-fra.com

Comment ajuster l'orientation d'une image afin d'afficher un aperçu correct de l'image?

enter image description hereenter image description hereenter image description here J'ai développé une application Web laravel qui a pour fonction d'accepter les images téléchargées par les utilisateurs, puis de les afficher. J'ai rencontré un problème lors des tests car les photos téléchargées à l'aide de téléphones portables tournaient 90 degrés dans le sens anti-horaire J'ai utilisé une intervention d'image pour résoudre ce problème. Mais comme je montre un aperçu de l'image téléchargée aux utilisateurs en utilisant javascript, les images pivotent de 90 degrés mais quand je sauvegarde l'image, elle devient correcte. Mon code javascript est

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

quelqu'un peut-il m'aider à orienter correctement l'image d'aperçu en modifiant le code ci-dessus afin que l'orientation de l'image change en cas de besoin.

javascriptjquerylaravellaravel-5exif
8
Jeffrin Jose

Que diriez-vous simplement de faire pivoter l'image avec CSS?

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

Edit: Eh bien, après une brève plongée dans le monde des données EXIF, je pense que je pourrais avoir une solution pour vous. J'ai emprunté la fonction getOrientation () d'ALi, comme l'a suggéré @Nick, puis j'ai juste corrigé l'orientation avec CSS comme suit:

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

violon

Et si vous avez besoin d'exemples de fichiers pour le tester, obtenez-les ici .

Modifier: Placer l'image téléchargée dans un <img> au lieu de l'image d'arrière-plan du div: https://jsfiddle.net/ynzvtLe2/2/

4
thingEvery

Cela devrait fonctionner. Ici, j'obtiens l'orientation d'origine du fichier image, puis je crée une toile avec la correction de rotation appropriée. Nous définissons ensuite l'image correctement tournée comme aperçu.

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

Assurez-vous d'inclure cette bibliothèque en premier: https://github.com/hMatoba/piexifjs

J'ai obtenu de l'aide de la documentation: https://readthedocs.org/projects/piexif/downloads/pdf/latest/

2
Sapnesh Naik