CSS object-fit：cover 不适用于 EXIF 方向更多 1 的 JPEG img

Question

无法理解我的 Angular 应用程序有什么问题。我正在为我的 Sumsung Galaxy 照片制作一个小画廊。为了有一个漂亮的设计，我使用“object-fit：cover”css属性。它适用于 EXIF“orientation”属性等于 1 的图像。并且不适用于“orientation”属性的另一个值（如 5 或 6）。它拉伸了我的图像。我还尝试通过“background-image”属性和“background-size:cover”加载我的图像的解决方案。情况完全相同：“方向等于 1”有效，“另一个方向”无效。我的 scss 代码是这样的：

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

有谁知道我的错误在哪里。非常感谢。

Answer 1

我不知道你的错误在哪里，但我会这样做来绕过这个问题：加载图像并将其复制到一个<canvas>元素，从而从其 EXIF 数据中“清除”。然后，您应该能够将所需的样式应用到画布上。

实现此目的的基本 JavaScript 是：

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);
};