Handling EXIF Image Orientation

[bameyrick]

Firstly, thanks for the great plugin! However I've noticed a small issue; When loading an image in with EXIF orientation, everything works as expected until the "getDataURL" method is called. The generated image does not crop correctly and the rotation of the cropped image is incorrect.

Below I've provided screen shots of the chosen crop area and the image generated by "Get Data URL (JPG)". The image was taken on an iPad in portrait mode.

The white area in the generated image only seems to happen when a crop is taken near the bottom the image.

Thanks

[fengyuanchen]

Thank you very much! I will handle it if it is possible.

[fengyuanchen]

I have fixed a bug when replace the image. Please try the new version 0.7.5 to check if it still occurs this problem.

[superniftydev]

My thanks as well for the fabulous plugin - I really appreciate the hard work you've clearly put into it.

I've updated to version 0.7.5 and unfortunately I'm still having the same issue as reported by @bameyrick. On an iOS device, it often processes a section of the image different from what's been selected in the GUI probably due to how iOS adjusts the image display based on EXIF Orientation data.

In my tests, an EXIF Orientation of 6 produces the issue because iOS rotates the image 90 degrees clockwise so that it displays 'correctly'. If that's the case, then I would also guess that EXIF Orientations of 3 and 8 would cause problems too since iOS would rotate those images 180 degrees and 90 degrees counter-clockwise respectively.

Forgive my corny test picture, but it shows the Chrome browser rendering the same photograph (with an EXIF Orientation of 6) on my desktop Mac and my iPhone 5:

If you have any suggestions on what I might be able to do to address this, they'd be greatly appreciated.

Thanks again!

[lucascurti]

Having the same issue. Anybody found a workaround for this issue?

[fengyuanchen]

Maybe it is more easy to handle the EXIF Orientation on the server-side.

[jasonterando]

First, thanks for an outstanding plug-in!!! I poked around to see if there was a client-side library I could use to do the EXIF correctio. There are a couple of JS EXIF readers (like https://github.com/jseidelin/exif-js), and I think I can use that info, load the image into a canvas, rotate the image in the canvas, and then get the data. I'll play around with this more and post any luck I have.

In the meantime, for .NET land, I put together a c# static method (which I wired up to a WebAPI, but you can use it with WCF or whatever). You'll need to add a project reference to System.Drawing (and add namespaces to your class for System.Drawing, System.Drawing.Imaging and System.Text).

        /// <summary>
        /// Removes EXIF rotation from an image
        /// </summary>
        /// <param name="URI"></param>
        /// <returns></returns>
        public static string RemoveEXIFRotation(string URI)
        {
            // Decode the URI information
            string base64Data = Regex.Match(URI, @"data:image/(?<type>.+?),(?<data>.+)").Groups["data"].Value;
            byte[] binData = Convert.FromBase64String(base64Data);

            using (var stream = new MemoryStream(binData))
            {
                Bitmap bmp = new Bitmap(stream);

                if(Array.IndexOf(bmp.PropertyIdList, 274) > -1)
                {
                    var orientation = (int) bmp.GetPropertyItem(274).Value[0];
                    switch(orientation)
                    {
                        case 1:
                            // No rotation required.
                            return URI;
                        case 2:
                            bmp.RotateFlip(RotateFlipType.RotateNoneFlipX);
                            break;
                        case 3:
                            bmp.RotateFlip(RotateFlipType.Rotate180FlipNone);
                            break;
                        case 4:
                            bmp.RotateFlip(RotateFlipType.Rotate180FlipX);
                            break;
                        case 5:
                            bmp.RotateFlip(RotateFlipType.Rotate90FlipX);
                            break;
                        case 6:
                            bmp.RotateFlip(RotateFlipType.Rotate90FlipNone);
                            break;
                        case 7:
                            bmp.RotateFlip(RotateFlipType.Rotate270FlipX);
                            break;
                        case 8:
                            bmp.RotateFlip(RotateFlipType.Rotate270FlipNone);
                            break;
                    }
                    // This EXIF data is now invalid and should be removed.
                    bmp.RemovePropertyItem(274);
                }

                ImageCodecInfo jgpEncoder = ImageCodecInfo.GetImageDecoders().First(x => x.FormatID == ImageFormat.Jpeg.Guid);

                // Create an Encoder object based on the GUID
                // for the Quality parameter category.
                System.Drawing.Imaging.Encoder myEncoder = System.Drawing.Imaging.Encoder.Quality;

                // Create an EncoderParameters object.
                // An EncoderParameters object has an array of EncoderParameter
                // objects. In this case, there is only one
                // EncoderParameter object in the array.
                EncoderParameters myEncoderParameters = new EncoderParameters(1);

                EncoderParameter myEncoderParameter = new EncoderParameter(myEncoder, 100L);
                myEncoderParameters.Param[0] = myEncoderParameter;

                using(MemoryStream output = new MemoryStream(binData.Length))
                {
                    bmp.Save(output, jgpEncoder, myEncoderParameters);
                    output.Position = 0;
                    int len = (int) output.Length;
                    byte[] results = new byte[len];
                    output.Read(results, 0, len);

                    return string.Format("data:image/jpg;base64,{0}", Convert.ToBase64String(results));
                }
            }
        }

Edit: Make sure to call this before loading image into cropper, not after

[fengyuanchen]

Thank you @jasonterando .

[jacobsvante]

Did you guys look further into using exif-js?

[bbrooks]

If you're getting an image from the user, you can use https://github.com/blueimp/JavaScript-Load-Image to get it into the correct orientation before using cropper:

$('#yourFileInput').on('change', function(e) {
    e.preventDefault();
    e = e.originalEvent;
    var target = e.dataTransfer || e.target,
        file = target && target.files && target.files[0],
        options = {
            canvas: true
        };

    if (!file) {
        return;
    }

    // Use the "JavaScript Load Image" functionality to parse the file data
    loadImage.parseMetaData(file, function(data) {

        // Get the correct orientation setting from the EXIF Data
        if (data.exif) {
            options.orientation = data.exif.get('Orientation');
        }

        // Load the image from disk and inject it into the DOM with the correct orientation
        loadImage(
            file,
            function(canvas) {
                var imgDataURL = canvas.toDataURL();
                var $img = $('<img>').attr('src', imgDataURL);
                $('body').append($img);

                // Initiate cropper once the orientation-adjusted image is in the DOM
                $img.cropper();
            },
            options
        );
    });
});

[kingwrcy]

@bbrooks nice work,you saved my day,awesome plugin.