在 CSS 缩放存在的情况下，如何使用 getBoundingClientRect() 获取屏幕坐标？

Question

我试图在屏幕坐标中使用 Javascript 找到 HTML 元素的边界框，以便我可以使用外部工具（例如 的ffmpeg屏幕x11grab录制功能）来单独获取该元素的屏幕截图/视频。

如果没有 CSS 缩放，那么我可以找到元素的边界框，elem如下所示：

let viewportTop = window.screenY + (window.outerHeight - window.innerHeight);
let viewportLeft = window.screenX;

let rect = elem.getBoundingClientRect();
let width = rect.width;
let height = rect.height;
let left = viewportLeft + rect.left;
let top = viewportTop + rect.top;

然后我可以使用这些width, height, left, top坐标在浏览器窗口上记录所需的框。

然而，有时我想增加元素的缩放以便更容易看到：

elem.style.zoom = "2";

完成此操作后，返回的边界框elem.getBoundingClientRect()现在按比例缩小了2。如果我使用上面的方法来计算我的记录边界框，它不再与元素对齐。

window.getComputedStyle(elem, null).getPropertyValue("zoom")我在调用、解析缩放数字并使用它来纠正边界框方面​​取得了一些成功。然而，这不是一个完美的解决方案——如果我想缩放document.body一定量并且也缩放目标元素一定量怎么办？

所以，我想知道是否有一种通用方法可以将坐标转换为elem.getBoundingClientRect屏幕坐标，即使在 CSS 缩放应用于各种元素时也能正常工作。

• 我考虑过使用浏览器自己的缩放而不是 CSS 缩放，但我不愿意，因为我使用 Selenium 来设置这些东西，并且我在这里看到了有关使用 Selenium 调整浏览器缩放的可怕警告。