Неправильная ориентация изображения внутри области предварительного просмотра

Question

У меня есть следующий код для предварительного просмотра изображения перед его загрузкой.

$(".custom-file-input").change(function () {
    if (typeof (FileReader) != "undefined") {
        let dvPreview = $(this).parents(".image-border").find(".image-media-preview");
        dvPreview.html("");
        $($(this)[0].files).each(function () {
            let file = $(this);
            let reader = new FileReader();
            reader.onload = function (e) {
                let img = $("<img />");
                img.attr("style", "max-width: 100%; max-height: 100%;");
                img.attr("src", e.target.result);
                dvPreview.append(img);
            }
            reader.readAsDataURL(file[0]);
        });
    } else {
        alert("This browser does not support HTML5 FileReader.");
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" class="custom-file-input" name="myfile">

<div class="image-border">
  <div class="image-media-preview">
  </div>
</div>

Но иногда ориентация изображения внутри области предварительного просмотра оказывается повернутой, что неверно.

Я обнаружил, что этот код может работать, но поскольку я Я новичок ie с javascript Понятия не имею, как его добавить. Может кто-нибудь помочь мне с этим?

function getOrientation(file, callback) {
var reader = new FileReader();
reader.onload = function(e) {

    var view = new DataView(e.target.result);
    if (view.getUint16(0, false) != 0xFFD8)
    {
        return callback(-2);
    }
    var length = view.byteLength, offset = 2;
    while (offset < length) 
    {
        if (view.getUint16(offset+2, false) <= 8) return callback(-1);
        var marker = view.getUint16(offset, false);
        offset += 2;
        if (marker == 0xFFE1) 
        {
            if (view.getUint32(offset += 2, false) != 0x45786966) 
            {
                return callback(-1);
            }

            var little = view.getUint16(offset += 6, false) == 0x4949;
            offset += view.getUint32(offset + 4, little);
            var tags = view.getUint16(offset, little);
            offset += 2;
            for (var i = 0; i < tags; i++)
            {
                if (view.getUint16(offset + (i * 12), little) == 0x0112)
                {
                    return callback(view.getUint16(offset + (i * 12) + 8, little));
                }
            }
        }
        else if ((marker & 0xFF00) != 0xFF00)
        {
            break;
        }
        else
        { 
            offset += view.getUint16(offset, false);
        }
    }
    return callback(-1);
};
reader.readAsArrayBuffer(file);
}

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