JavaScript：以像素为单位获取背景位置答案

【问题标题】：JavaScript: Get background-position in pixelsJavaScript：以像素为单位获取背景位置
【发布时间】：2020-01-14 10:59:08
【问题描述】：

我正在开发一个 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() 获得大小，因为计算必须实时进行，我不能等待图像加载。

谢谢！

【问题讨论】：

问题是在某些情况下我可能知道图像的大小，我需要在不加载图像的情况下计算它。
位置是相对于容器和“背景大小”的，在我的例子中是“自动”，所以我不知道背景的大小。
如果我的容器是 100px x 100px 并且“背景位置”设置为“50% 50%”，则转换将为“50px 50px”。这不等于“50% 50%”，因为它将背景图像的左上角设置为“50px 50px”。
对于后一个问题，由于没有加载图像，您就不能使用 onLoad 启动动画吗？ <body onload="startAnimation()">
您要么知道图像的大小，要么知道背景大小的值来进行计算。更多细节在这里：stackoverflow.com/a/51734530/8620333 您将在“像素值与百分比值之间的关系”部分中找到公式

标签： javascript css animation background-position

【解决方案1】：

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

请看：

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;
}

&lt;div id="divDemo"&gt;&lt;/div&gt;

关于这个主题的更多信息here

【讨论】：

这将始终给出相同的值whataver图像但值取决于图像大小
在我的桌面上使用不同屏幕尺寸的 Firefox（使用 ctrl+m 魔法）它显示了不同的结果：显示 480 X 320 (232px ,152px) 而在 1000 X 800 上显示 (492px, 392px )。
我说的是图像，而不是屏幕尺寸。对于一种屏幕尺寸，您将始终具有相同的值，这是错误的，因为它应该是基于图像的不同值……如果我们考虑像素值，则 50x50 图像与 500x500 图像的位置不同（相关：@ 987654322@)
抱歉我的无知，但是当我将位置更改为：10% 10% 这给了我其他结果。这是什么？容器位置还是图像？
在背景位置处理百分比值时，需要考虑两个因素：图像 size 和容器 size。你需要他们两个来找到这个位置。尝试使用具有不同 size 的两个不同图像并考虑相同的 background-position 值并查看两者的放置方式不同，但您的代码将给出相同的结果，因为它不考虑图像大小.

【解决方案2】：

如果你只需要元素的位置，不妨试试这个：

element.getBoundingClientRect(); （来源：https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect）

您可以获得每个角的位置以及元素的尺寸，如下所示： element.getBoundingClientRect().left;

这将返回属性：left、top、right、bottom、x、y、width 和 height。全部以像素为单位！

【讨论】：