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

Posted 2023-03-27

【中文标题】以正确的方向显示图像 - Blazor 服务器端

【英文标题】：Display Image in Proper Orientation - Blazor Server Side

【发布时间】：2021-12-13 21:07:32

【问题描述】：

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

.photo
    image-orientation: from-image;

但似乎 css 已被弃用/不适用于 edge 和 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>

图片现在的样子（第一张和第二张应该是纵向的）：

【参考方案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)')
);

【讨论】：

我收到错误“Microsoft.JSInterop.JSException：未定义方向”

@SaraCox 你能检查一下图片在 Exif 中是否有可用的方向信息吗？

我相信是这样，如果我没看错的话。如果我右键单击该文件并转到详细信息选项卡下的属性，则会有一个值为 0231 的 EXIF 版本属性