please review this issue img tag displays wrong orientation
essentially when the image is opened directly in chrome, chrome will treat it as a jpg in place, look at the exif meta data, and rotate it correctly.
In your case when using the img element, no translation occurs (it just loads the image with the orientation of how the image was taken).
Clientside fix would be to use:
img {
image-orientation: from-image;
}
however this isnt supported in all browsers.
If you can rotate the image server side, and remove the exif data for image rotation this will ensure all images are correctly rotated in the data (and not applied from the exif rotation)
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);
}
}
