JavaScript:以像素为单位获取背景位置

我正在开发一个 JavaScript 动画库并遇到了一个问题:所有值通常以 像素 使用此默认函数返回:

window.getComputedStyle(element).getPropertyValue(property);

但是，当像这样获取背景位置的值时:

window.getComputedStyle(element).getPropertyValue('background-position');

结果是 50% 50% (背景位置:中心)。如何将值转换为像素？我编写了以下函数，但它给了我错误的结果，原因是背景位置的百分比也与图像大小有关。

var pixelsX = (parseFloat(percentX) / 100 * element.offsetWidth) + 'px';
var pixelsY = (parseFloat(percentY) / 100 * element.offsetHeight) + 'px';

我也无法使用 Image() 获取大小，因为计算必须实时进行，而且我不能等待图像加载。

谢谢!

最佳答案

我实际上确实尝试过你的代码并且它有效......
这不是准确的尺寸吗？
我在不同的屏幕尺寸上检查过它，看起来很准确。

请看一看:

var demoDiv = document.getElementById('divDemo');
var demoCalc = window.getComputedStyle(demoDiv).getPropertyValue('background-position');
var pixelsX = (parseFloat(demoCalc) / 100 * demoDiv.offsetWidth) + 'px';
var pixelsY = (parseFloat(demoCalc) / 100 * demoDiv.offsetHeight) + 'px';
console.log(demoCalc);
console.log(pixelsX);
console.log(pixelsY);

body {height: 100vh; width: 100vw; overflow: hidden}
#divDemo {
  height: 100%; width: 100%;
  background-image: url(https://images.unsplash.com/photo-1554056588-6c35fac03654?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80);
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

<div id="divDemo"></div>

关于这个主题的更多 SO here