javascript - 在存在 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 调整浏览器缩放的可怕警告。

标签： javascripthtmlcssselenium