cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Advocate I
Advocate I

EXIF-rotated photos don't fit or centre in image control

I've been having an issue displaying photos in an Image control, where the photo was taken by the mobile native camera (Add Picture). If the photo is taken in portrait mode, then displayed in an Image control with ApplyEXIFOrientation=true and ImagePosition=ImagePosition.Fit, then the image displays the right way up, but zoomed/cropped and not centred. I am seeing this behaviour in both Android mobile app and the web player. If CalculateOriginalDimensions=true, then the web player displays the image correctly, but the Android mobile app still does not. See attached screenshots.

 

It seems that my phone is storing photos as landscape, even when taken in portrait orientation, and presumably adding orientation EXIF metadata, because the file properties indicate width > height. The captured photo can be uploaded to SharePoint via a Flow and displays with the correct orientation.

 

If I use an image editor to rotate the image, then Add Picture, the whole image is displayed correctly in portrait orientation and centred.

 

If ApplyEXIFOrientation=false, then the whole image is displayed and centred, but in portrait orientation.

 

The issue seems to be with incorrect CSS applied to the image control...

 

In the web player, looking at the applied CSS to the <div class="appmagic-image-inner" ... > element, we have:

 

For the original image:

style="height: 600px; width: 600px; margin: 0px; background-size: 600px 336.923px; background-repeat: no-repeat; background-position: center center; background-image: url(&quot;blob:https://xxxxx&quot; ); transform: matrix(0, 1, -1, 0, 0, 0);"

 

For the edited/rotated image:

style="height: 100%; width: 100%; margin: 0px; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url(&quot;blob:https://xxxxx&quot; ); transform: matrix(1, 0, 0, 1, 0, 0);"

 

Hacking the CSS in the web player, it looks like height, width and background-size styles should remain the same in both cases to achieve the expected image sizing and placement, eg:

"height: 100%; width: 100%; background-size: contain"

 

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Advocate I
Advocate I

Re: EXIF-rotated photos don't fit or centre in image control

MS support confirmed "ImagePosition.Fit" scaling for EXIF-rotated imagea are currently unsupported, with no ETA on a fix. Best options are to use ImagePosition.Fill or ImagePosition.Stretch or just disable EXIF orientation (ApplyEXIFOrientation=false).

View solution in original post

5 REPLIES 5
Highlighted
Community Support
Community Support

Re: EXIF-rotated photos don't fit or centre in image control

Hi @markforemansapn,

Please take a try to set the ImagePosition property of the Image control within your app to following:

ImagePosition.Center

Set the ApplyEXIFOrientation property of the Image control to following:

true

then try it again within your Mobile device, check if the issue is solved.

If the issue still exists, please consider take a try to submit an assisted support ticket through the following link:

https://powerapps.microsoft.com/en-us/support/pro/

 

Best regards,

Kris

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
Highlighted
Anonymous
Not applicable

Re: EXIF-rotated photos don't fit or centre in image control

@markforemansapn can you review the latest reply from @v-xida-msft and advise if you're still experiencing this issue?

 

@Anonymous

Highlighted
Advocate I
Advocate I

Re: EXIF-rotated photos don't fit or centre in image control

Hi @v-xida-msft, thanks for looking at this. Unfortunately the suggestion to use ImagePosition.Center doesn't solve the problem. Even though it centres the image, i crops rather than scaling to fit the bounds of the image control.

Highlighted
Advocate I
Advocate I

Re: EXIF-rotated photos don't fit or centre in image control

FYI I've raised a support ticket and the support team has picked it up. I'll update here when there is a resolution.

 

For the curious, a minimal app that demonstrates the problem:

1.     Create a blank canvas app for phone format
2.     Add one “Add Picture” control
3.     Set the widths of the contained controls to Parent.Width and locations to (0,0)
4.     Set image position of the contained image control to “Fit”
5.     Turn off “Lock aspect ratio” in App settings

Then run in the web player or on mobile and select the image ive attached. You'll see that the image is cropped and not centred.

Highlighted
Advocate I
Advocate I

Re: EXIF-rotated photos don't fit or centre in image control

MS support confirmed "ImagePosition.Fit" scaling for EXIF-rotated imagea are currently unsupported, with no ETA on a fix. Best options are to use ImagePosition.Fill or ImagePosition.Stretch or just disable EXIF orientation (ApplyEXIFOrientation=false).

View solution in original post

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Find your favorite faces from the community presenting at the Power Platform Community Conference!

Watch Now

Experience what’s next for Power Apps

See the latest Power Apps innovations, updates, and demos from the Microsoft Business Applications Launch Event.

Check this Out

Helpful information

Featuring samples like Return to the Workplace and Emergency Response Applications

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Top Solution Authors
Top Kudoed Authors
Users online (12,275)