object-fit:cover 不适用于移动设备上的 ImageCapture.takePhoto

问题描述

我尝试展示ImageCapture API拍摄的带有object-fit:cover的照片。它与桌面上的 Chrome 完美配合。但是,object-fit:cover 样式不适用于适用于所有设备和模拟器的 Android 版 Chrome。

可以在 here 中找到此问题的最小示例。

<img id="photoImg" /> 的大小固定为 200 * 400 px,以展示 object-fit:cover 样式。图像的 srcImageCapture.takePhoto() 方法生成,并通过 URL.createObjectURL() 函数将 blob 转换为 URL。

以下是桌面版 Chrome 的结果,运行良好。

遗憾的是,Android (Sony Xperia 1) 上 Chrome 的以下结果具有失真的图像比例。 object-fit:cover 似乎不起作用。

我已使用 Remote Debugging Android Devices 确认其他 object-fit 值(例如 object-fit:contain)确实按预期工作。

我怀疑 Blob 中的 ImageCapture 可能会遗漏一些正确计算图像比率的关键信息,但我不知道如何进一步调查。

如何使 object-fit:cover 在装有 Chrome 的移动设备上运行?

解决方法

经过调查,我找到了根本原因:a Chromium bug。 89版已经修复并发布。因此,此问题不再有效。