8

Can not understand what is wrong with my Angular app. I am making a little gallery of my Sumsung Galaxy photos. In order to have a nice design I use "object-fit: cover" css attribute. It works nice for the images with EXIF "orientation" property equals to 1. And does not work for another values of "orientation" property (like 5 or 6). It stretchs my images. Also I try solution with loading my images throught "background-image" property with "background-size: cover". The situation is exactly the same: "orientation equals to 1" works, "another orientation" does not. My scss code is like this:

div{
 height: 150px;
 width: 150 px;
 img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    }
}

Has anybody any idea where is my mistake. Thanks a lot.

Eyeslandic
  • 14,553
  • 13
  • 41
  • 54
Ольга Залесковская
  • 111
  • 3

1 Answers1

-1

I don't know where your mistake is, but here's what I'd do to bypass the problem: Load the image and copy it to a <canvas> element, hence "purged" from its EXIF data. Then, you should be able to apply the desired style to the canvas.

The basic JavaScript to achieve this would be:

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
document.body.append(canvas);
const image = new Image();
image.src = 'path/to/your/image.jpg';
image.onload = () => {
  canvas.width = image.naturalWidth;
  canvas.height = image.naturalHeight;
  context.drawImage(image, 0, 0);
};
corbin-c
  • 669
  • 8
  • 20