object-fit:cover 不适用于移动设备上的 ImageCapture.takePhoto
object-fit:cover Not Working with ImageCapture.takePhoto on Mobile
我试着展示 ImageCapture API 拍摄的 object-fit:cover
的照片。它与桌面上的 Chrome 完美配合。但是,object-fit:cover
样式不适用于 Android 上的 Chrome,适用于所有设备和模拟器。
可以找到此问题的最小样本 here。
<img id="photoImg" />
的大小固定为200 * 400 px,以展示object-fit:cover
的风格。图像的 src
由 ImageCapture.takePhoto()
方法生成,并通过 URL.createObjectURL()
函数将 blob 转换为 URL。
以下是 Chrome 在桌面上的结果,运行完美。
遗憾的是,Chrome 在 Android (Sony Xperia 1) 上的以下结果具有失真的图像比例。 object-fit:cover
似乎不起作用。
我已使用 Remote Debugging Android Devices 确认其他 object-fit
值(例如 object-fit:contain
是否按预期工作。
我怀疑 ImageCapture
中的 Blob
可能会遗漏一些关键信息,以便正确计算图像比率,但我不知道如何进一步调查。
如何让 object-fit:cover
在移动设备上使用 Chrome?
经过调查,我找到了根本原因:a Chromium bug。 89版本修复发布,此题不再有效
我试着展示 ImageCapture API 拍摄的 object-fit:cover
的照片。它与桌面上的 Chrome 完美配合。但是,object-fit:cover
样式不适用于 Android 上的 Chrome,适用于所有设备和模拟器。
可以找到此问题的最小样本 here。
<img id="photoImg" />
的大小固定为200 * 400 px,以展示object-fit:cover
的风格。图像的 src
由 ImageCapture.takePhoto()
方法生成,并通过 URL.createObjectURL()
函数将 blob 转换为 URL。
以下是 Chrome 在桌面上的结果,运行完美。
遗憾的是,Chrome 在 Android (Sony Xperia 1) 上的以下结果具有失真的图像比例。 object-fit:cover
似乎不起作用。
我已使用 Remote Debugging Android Devices 确认其他 object-fit
值(例如 object-fit:contain
是否按预期工作。
我怀疑 ImageCapture
中的 Blob
可能会遗漏一些关键信息,以便正确计算图像比率,但我不知道如何进一步调查。
如何让 object-fit:cover
在移动设备上使用 Chrome?
经过调查,我找到了根本原因:a Chromium bug。 89版本修复发布,此题不再有效