Uploaded Image not as per the display from the gallery

Uploaded Image not as per the display from the gallery

  

When we tested our outsystems app in Samsung S7 edge, we noticed that the image rotates anticlockwise after upload where as in the gallery or while selecting the image from gallery for upload, the image is normal.

Please refer to the below screen shots in order:


We selected the second image on the first row.


After upload it rotated anti-clockwise. Please let me know how to fix this ?

Thanks.


There's meta data on the image to indicate its orientation. The phone will often display it rotated in the on-phone gallery because the metadata says it is rotated, but the image binary itself is stored 90 degrees off. There are a couple of Forge components that can read the EXIF meta data and do rotations, you need to use these to read the data and rotate it before store it in the database if the image is rotated.

J.Ja

Thanks Justin. Your reply was helpful.

Can you let me know how to rotate the image after knowing the orientation from the EXIF meta data.


Should I use a javascript for this ?

Solution

Kartick -


There are components in the Forge that can perform image rotation on the binary images (such as the ImageMagick component). I would rotate them before you save them to the DB, if needed, so they will always be right.

J.Ja

Solution

Thanks Justin,


I used the forge component ImageToolbox and it worked fine.

Hi Justin,


The current solution with ImageToolbox works but the request has to go to the server, compress, rotate then return the image to client (mobile). Sometimes, this process takes more time to complete and also uses more mobile data if the image size is big.

Is there any way to compress the image at the client side (mobile)?



Kartick -

I can't say for sure on Android, but iOS saves images as JPGs. They are *already* compressed. Plus, HTTP supports compression as well. So compressing them client side is not going to get you significant gains, and may actually make the files bigger.

But if you still think you need to compress client side, it seems like there are plenty of in-brower, JavaScript ZIP libraries, and OutSystems ships with a ZIP extension that can unzip on the server side.

J.Ja