Я пытаюсь найти ограничивающую рамку элемента HTML, используя Javascript в экранных координатах, чтобы я мог использовать внешние инструменты (такие как x11grab *1002* функция записи экрана), чтобы делать скриншоты / видео этого элемента отдельно.
Если нет увеличения 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 здесь .