Image rotated on mobile (PWA)

0
Hi, When I upload an image (as a CropImage, because I use Crop module), the thumbnail is okay, I can crop, but when I save the image, it’s actually rotated. Anyone else has this issue ?   Thanks
asked
1 answers
0

Hi Francois,

 

Since a mobile phone camera works with image-orientation (Selfies rotated-90 deg. and back camera rotated with 90deg), the correct setting can get lost during the process from capturing till presenting on the screen.

 

So in order to force the image to be displayed properly, you should add some CSS-styling for the image-orientation, which has several options:

 

/* keyword values */
image-orientation: none;
image-orientation: from-image; /* Use EXIF data from the image */

/* Global values */
image-orientation: inherit;
image-orientation: initial;
image-orientation: revert;
image-orientation: revert-layer;
image-orientation: unset;

Depending on the camera settings and application displaying styling, the CSS settings above will help you fixng the image.

In addition: more information concering image-orientation can be found at https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation

 

Good luck with it,

Jan

answered