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

【问题标题】：CSS object-fit: cover does not work with JPEG img with EXIF orientation more 1CSS object-fit：cover 不适用于 EXIF 方向的 JPEG img 更多 1
【发布时间】：2020-11-17 19:56:39
【问题描述】：

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

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

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

【问题讨论】：

标签： css angular exif

【解决方案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);
};

【讨论】：