Question

我正在编写Azure云项目，并在从Azure blob存储加载图像时遇到问题。调用blob文件以HTML格式呈现时：

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

图像侧向加载（向左旋转90度）。但是，直接查看文件路径时，图像会按预期直立加载。这些图像相当大（约2MB，宽度高达2500px和/或高），而且我的小图像没有这个问题。

有没有人建议为什么图像可以加载旋转？

我会为此提供一个登录信息，以显示操作中的问题，但不幸的是，这是针对客户端并包含敏感数据。只是寻找可能导致此行为的任何建议（CSS中没有旋转或任何东西）。

Answer 1

请查看此问题img tag displays wrong orientation

基本上当图像直接在chrome中打开时，chrome会将其视为jpg，查看exif元数据并正确旋转。

在使用img元素的情况下，不会发生翻译（它只是加载图像的方向）。

Clientside修复将使用：

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

Answer 2

我现在唯一可以猜到的是，你的javascript中的某些东西可能正在播放图像。对不起，我可以帮助过去：/

Azure Blob图像侧向加载

2 个答案: