如何调整图像的方向以显示正确的图像预览? [英] How to adjust the orientation of a image in order to show proper preview of the image?

问题描述

我开发了一个laravel Web应用程序，该应用程序具有接受图像的功能用户上传并显示它.测试时我遇到了一个问题，用手机上传的照片沿逆时针方向旋转了90度，我用图像干预解决了这个问题.但是，当我使用javascript向用户显示上载图像的预览时，图像旋转了90度，但是当我保存图像时，它就变得正确了. 我的JavaScript代码是

I have developed a laravel web application which has a function of accepting images uploaded by users and then display it. I had encountered a problem while testing as photos uploaded using mobile phones were rotating 90 degrees in anti clock wise direction I used image intervention to solve that issue . But as i am showing a preview of the uploaded image to the users using javascript the images are rotated 90 degrees but when i save the image it becomes proper. My javascript code is

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

任何人都可以通过编辑上面的代码来帮助我正确调整预览图像的方向，以便在需要时更改图像的方向.

can anyone please help me to properly orient the preview image by editing the code above so that the orientation of the image changes when needed.

推荐答案

仅使用CSS旋转图像怎么样?

How about just rotating the image with CSS?

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

---

编辑:好吧，在简要介绍一下EXIF数据世界之后，我想我可能会为您提供解决方案.我按照@Nick的建议借用了Ali的 getOrientation()函数，然后按如下所示使用CSS纠正了方向:

---

Well, after a brief dive into the world of EXIF data, I think I might have a solution for you. I borrowed Ali's getOrientation() function, as @Nick suggested, and then I just corrected the orientation with CSS as follows:

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

小提琴

如果您需要示例文件进行测试，请在此处获取它们.

And if you need example files to test it, get them here.

编辑:将上传的图片放在<img>中，而不是div的背景图片中: https://jsfiddle.net/ynzvtLe2/2/

Placing the uploaded image in an <img> instead of the div's background-image: https://jsfiddle.net/ynzvtLe2/2/

这篇关于如何调整图像的方向以显示正确的图像预览?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！