如何调整图像的方向以显示图像的正确预览？

Question

我开发了一个 Laravel Web 应用程序，它具有接受用户上传的图像然后显示它的功能。我在测试时遇到了一个问题，因为使用手机上传的照片逆时针方向旋转了 90 度，我使用图像干预来解决这个问题。但是当我使用 javascript 向用户显示上传图像的预览时，图像旋转了 90 度，但是当我保存图像时它变得正确。我的 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");
    });

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

Answer 1

只用 CSS 旋转图像怎么样？

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

编辑：好吧，在简短地深入了解 EXIF 数据的世界之后，我想我可能会为您提供一个解决方案。我借用了阿里的getOrientation()函数，正如 @Nick 所建议的，然后我只是用 CSS 修正了方向，如下所示：

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

小提琴

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

编辑：将上传的图像放置在<img>div 的背景图像中： https: //jsfiddle.net/ynzvtLe2/2/