横向加载 Azure Blob 图像

Azure Blob Image Loading Sideways

我正在编写一个 Azure 云项目,但在从 Azure blob 存储加载图像时遇到问题。在 HTML 中调用要渲染的 blob 文件时:

<img src="https://xxxx.blob.core.windows.net/folder/imagename.jpg" />

图像横向加载(向左旋转 90 度)。但是,当直接查看文件路径时,图像会按预期垂直加载。这些图片相当大(约 2MB,宽达 2500 像素 and/or 高),我对较小的图片没有这个问题。

对于为什么图像可以旋转加载,有人有什么建议吗?

我会为此提供一个登录名以显示实际问题,但不幸的是它是针对客户的并且包含敏感数据。只是寻找可能导致此行为的任何建议(CSS 或任何内容中没有旋转)。

我现在唯一能猜到的是你 javascript 中的某些东西可能正在玩弄图像。抱歉,我无法提供太多帮助:/

请查看此问题img tag displays wrong orientation

本质上当直接在chrome中打开图像时,chrome会把它当做一个jpg,查看exif元数据,并正确旋转它。

在您的情况下,当使用 img 元素时,不会发生任何转换(它只是按照图像的拍摄方向加载图像)。

客户端修复将使用:

img {
image-orientation: from-image;

}

然而,并非所有浏览器都支持此功能。

如果您可以旋转图像服务器端,并删除图像旋转的 exif 数据,这将确保所有图像在数据中正确旋转(而不是从 exif 旋转应用)

    public static Boolean ExifRotate(System.Drawing.Image img)
    {
        int exifOrientationID = 0x112;

        if (!img.PropertyIdList.Contains(exifOrientationID))
        {
            return false;
        }

        var prop = img.GetPropertyItem(exifOrientationID);
        int val = BitConverter.ToUInt16(prop.Value, 0);
        var rot = RotateFlipType.RotateNoneFlipNone;


        if (val == 3 || val == 4)
        {
            rot = RotateFlipType.Rotate180FlipNone;
        }
        else if (val == 5 || val == 6)
        {
            rot = RotateFlipType.Rotate90FlipNone;
        }
        else if (val == 7 || val == 8)
        {
            rot = RotateFlipType.Rotate270FlipNone;
        }

        if (val == 2 || val == 4 || val == 5 || val == 7)
        {
            rot |= RotateFlipType.RotateNoneFlipX;
        }

        if (rot != RotateFlipType.RotateNoneFlipNone)
        {
            img.RotateFlip(rot);
            img.RemovePropertyItem(exifOrientationID);

            return true;
        }

        return false;
    }


    public static byte[] ImageToByte(System.Drawing.Image img)
    {
        using (var stream = new MemoryStream())
        {
            img.Save(stream, System.Drawing.Imaging.ImageFormat.Jpeg);
            return stream.ToArray();
        }
    }

var exifTypes = new List<System.Net.Http.Headers.MediaTypeHeaderValue>()
            {
                new System.Net.Http.Headers.MediaTypeHeaderValue("image/jpeg"),
                new System.Net.Http.Headers.MediaTypeHeaderValue("image/jpg")
            };

            if (exifTypes.Contains(fileData.Headers.ContentType))
            {
                using (var stream = await fileData.ReadAsStreamAsync())
                {
                    stream.Position = 0;

                    var img = Bitmap.FromStream(stream);
                    var changed = ExifRotate(img);

                    if (changed)
                    {
                        var imageRotated = ImageToByte(img);
                        blob.Save(imageRotated, fileData.Headers.ContentType.MediaType, metadata);
                    }
                    else
                    {
                        stream.Position = 0;
                        blob.Save(stream, fileData.Headers.ContentType.MediaType, metadata);
                    }
                }
            }
            else
            {
                using (var stream = await fileData.ReadAsStreamAsync())
                {
                    stream.Position = 0;
                    blob.Save(stream, fileData.Headers.ContentType.MediaType, metadata);
                }
            }