Image processor rotating images and leaving black bars

Questions
1

Honestly, I’m unsure where to start explaining this one but here goes.

I built a Umbraco project using 7.7.2 for a friend but it never went live. It sat dormant for about 2 years until he recently decided he wanted to put some effort into it and get it live. I sent it over for him to populate and I’m experiencing a very weird issue with Image Processor where after calling GetCropUrl(“alias”, “cropAlias”) it is rotating and sometimes leaving black bars .

He uploaded a tonne of images into the media section and also via the various croppers available on the different document types and although they display correctly (correct orientation) in the CMS. On the front end they are wrong.

Example in the CMS (for image cropper)

enter image description here
enter image description here966×461 54.9 KB

Example on the front end (for image cropper)

enter image description here
enter image description here1226×448 65.3 KB

Example in the CMS (for media image)

enter image description here
enter image description here856×549 35.7 KB

Example on the front end

enter image description here
enter image description here1246×487 464 KB

The code (wasnt using model builder at the time of the build) is as follows:

Cropper image code (service is IPublishedContent via a foreach)

<img class="img-responsive" src="@(service.HasValue("image") ? service.GetCropUrl("image", "768x768") : productImgPlaceholder)" alt="@service.Name" title="@service.Name">

Media Image code (pulled from an album in the media section)

var galleryAlbum = Umbraco.TypedMedia(Model.Content.GetPropertyValue<int>("galleryAlbum"));
                <ul class="work-grid">
                    @foreach (var image in galleryAlbum.Children)
                    {
                        <li class="col-sm-3 col-md-2">
                            <a href="@image.Url" title="@image.Name" class="image-lightbox">
                                <div class="work-item-image">
                                    <img class="img-responsive" src="@image.GetCropUrl(768,768)" alt="@image.Name" title="@image.Name">
                                </div>
                            </a>
                        </li>
                    }
                </ul>

I have looked at the following things with no luck

It seems that it uses a crop mode of percentage instead of crop!

I have read some posts on ‘our’ mentioning EXIF data but after removing the photo info it doesn’t make a difference.

Some of the posts on Our

Perhaps its something to do with the image itself which were all from iPhone. If I create an image canvas in photoshop i.e. 768x768 place the image o, save for web, and upload to Umbraco via media or crop… it displays as expected in the CMS and front end. The problem is there are hundreds of images and I wanted to avoid going through them all and editing. Also, it gives me no confidence in future uploads.

Ive built many small Umbraco sites using v8 and v7 and ive not come across this. If anyone can help me I would be really grateful.

This is a companion discussion topic for the original entry at https://our.umbraco.com/forum/103249-image-processor-rotating-images-and-leaving-black-bars