1

I'm writing an Azure Cloud Project and having issues when loading images from Azure blob storage. When calling the blob file to render in HTML:

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

the images load sideways (90 degree rotation left). However, when viewing the file path directly, the image loads upright as expected. These images are fairly large (~2MB and up to 2500px wide and/or tall), and I don't have this issue with smaller images.

Does anyone have any suggestion as to why the image could be loading rotated?

I would provide a login for this to show the issue in action but unfortunately it's for a client and contains sensitive data. Just looking for any suggestions that could be causing this behavior (there are no rotations in the CSS or anything).

David Makogon
  • 69,407
  • 21
  • 141
  • 189
drewness
  • 109
  • 8
  • do you have a solution for this already? I'm encountering this issue and can't figure what's wrong. I'm just loading the blob uri to the image src and somehow it loads sideways. weird. – justadeveloper Oct 20 '16 at 13:32
  • unfortunately I don't have any answer for this, haven't found a solution. Would be very interested if you do. – drewness Jan 11 '17 at 21:20
  • I've found a workaround for this issue, I'm using [exif.js](https://www.bram.us/2016/02/19/exif-js-javascript-library-for-reading-exif-image-metadata/) to fix the orientation issue. – justadeveloper Jan 12 '17 at 08:10

2 Answers2

2

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);
                }
            }
andrew.butkus
  • 777
  • 6
  • 19
0

The only thing I can guess right now is that something in your javascript could be playing with the image. Sorry that I can't be of much help past that :/

Michael Curd
  • 617
  • 4
  • 10