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

Question

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

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

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

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

可悲的是，Android（Sony Xperia 1）上的 Chrome 的以下结果具有失真的图像比例。似乎object-fit:cover不起作用。

我已经使用远程调试 Android 设备来确认其他object-fit值，例如object-fit:contain按预期工作。

我怀疑BlobfromImageCapture可能会错过一些关键信息，以便正确计算图像比率，但我不知道如何进一步调查。

如何object-fit:cover使用 Chrome 在移动设备上进行工作？

标签： androidcsswebrtcimage-capture

Answer 1

经过调查，我找到了根本原因：一个 Chromium bug。它已在版本 89 中修复并发布。因此，此问题不再有效。