I'm trying to find the bounding box of an HTML element using Javascript in screen coordinates so that I can use external tools (such as ffmpeg's x11grab screen recording functionality) to take screenshots/videos of that element by itself.
If there is no CSS zoom present, then I can find the bounding box for element elem like this:
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;
I can then use these width, height, left, top coordinates to record the desired box on the browser window.
However, sometimes I want to increase the zoom of the element to make things easier to see:
elem.style.zoom = "2";
Having done this, the bounding box returned by elem.getBoundingClientRect() is now scaled down by a factor of 2. If I use the approach above to calculate my recording bounding box, it no longer lines up with the element.
I've had some success with calling window.getComputedStyle(elem, null).getPropertyValue("zoom"), parsing the zoom number, and using it to correct the bounding box. However, this isn't a perfect solution--what if I want to zoom document.body by some amount and also zoom the target element by some amount?
So, I'm wondering if there's a universal way to convert the coordinates from elem.getBoundingClientRect to screen coords that works even when CSS zoom is applied to various elements.
- I considered using the browser's own zoom rather than CSS zoom, but I would rather not since I'm using Selenium to set this stuff up and I've seen dire warnings about adjusting the browser zoom with Selenium here.
