cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
markforemansapn
Level: Powered On

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
markforemansapn
Level: Powered On

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 Team
Community Support Team

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.
Administrator
Administrator

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?

 

@TopShelf-MSFT

markforemansapn
Level: Powered On

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.

markforemansapn
Level: Powered On

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.

markforemansapn
Level: Powered On

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
firstImage

Microsoft Business Applications Virtual Launch Event

Join us for an in-depth look at the new innovations across Dynamics 365 and the Microsoft Power Platform.

firstImage

Watch Sessions On Demand!

Continue your learning in our online communities.

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

FirstImage

Power Platform World Tour

Coming to a city near you

thirdimage

PowerApps Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

FourthImage

Join PowerApps User Group!!

Connect, share, and learn with your peers year-round

Top Kudoed Authors
Users Online
Currently online: 406 members 2,804 guests
Please welcome our newest community members: