javascript - 以正确的方向显示图像 - Blazor 服务器端

Question

我的页面正在显示来自 azure 存储的文件，其中一些是横向的，而另一些是纵向的。我的问题是所有文件都显示为横向。起初我只是尝试添加以下css：

.photo{
    image-orientation: from-image;
}

但似乎 css 已被弃用/不适用于边缘和 chrome。

接下来我尝试使用 blueimp 的JavaScript-Load-Image。哪个正在显示图像，但方向没有改变 - 它们仍然以横向显示。

JavaScript：

function RotateImage(fileURL) {
    var loadingImage = loadImage(
        fileURL,
        function (img) {
            document.body.appendChild(img)
        },
        { orientation: true }
    )

    return loadingImage;
}

HTML：

<div class="photosGridDiv">
    @foreach (var file in currentFiles)
    {
        <div>
            @(JSRuntime.InvokeAsync<object>("RotateImage", file.filePath))
            <br />
            <a href="@file.filePath">@file.fileName</a>
        </div>
    }
</div>

图像现在看起来如何（第一个和第二个应该是肖像）：

标签： javascripthtmlcssblazorblazor-server-side

Answer 1

也许在客户端处理旋转，使用 exif-js（https://github.com/exif-js/exif-js）并应用 CSS 转换。

EXIF.getData(imageElement, function() {
    var orientation = EXIF.getTag(this, "Orientation");
    if(orientation == 6)
        $(imageElement).css('transform', 'rotate(90deg)')
});