横向加载 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);
}
}
我正在编写一个 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);
}
}