时间戳

首页 > 解决方案 > CSS object-fit：cover 不适用于 EXIF 方向的 JPEG img 更多 1

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

问题描述

无法理解我的 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;
    }
}

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

标签： cssangularexif

解决方案

我不知道你的错误在哪里，但这是我绕过问题的方法：加载图像并将其复制到一个<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);
};

推荐阅读