将背景大小和背景位置相对值转换为绝对 PX 值

Question

我有一个带有背景图像、自定义背景大小（自动 + %）和自定义背景位置（x% y%）的 div。

所以我有所有这些数据：

• div 宽度
• div 高度
• div bg 大小
• div bg 图片宽度
• div bg 图片高度
• div bg 图片位置 x
• div bg 图片位置 y

例如：

• div 宽度：200px
• div 高度：100px
• div bg 大小：自动 105%
• div bg 图片宽度：400px
• div bg 图片高度：280px
• div bg 图片位置 x：20%
• div bg 图片位置 y: 12%

我需要将其转换为 PX 值，以便我可以在画布中重新创建它。

当我拥有所有的价值观时，我会做这样的事情：

ctx.drawImage(img, sx, sy, swidth, sheight, 100, 100, 200, 100).

但我需要使用 sx、sy、swidth 和 sheight 来剪辑图像，它们是剪辑的起始坐标以及剪辑的宽度和高度。

谢谢！

Answer 1

诀窍是将百分比背景位置转换为等效的像素值。在此示例中，您可以这样做：（（图像宽度 - div 宽度）* 背景百分比）。查看代码时看起来要复杂得多，但这里有一个工作示例：

var testDiv = $("#test");
var bgImgSize = testDiv.css("background-size").replace(/px|%/g, "").split(" ");
var bgImgPosition = testDiv.css("background-position").replace(/px|%/g, "").split(" ");
var bgImgXPosition = (bgImgPosition[0] == 100) ? (bgImgSize[0] - testDiv.width()) : ((bgImgSize[0] - testDiv.width()) * (bgImgPosition[0] * .01));
var bgImgYPosition = (bgImgPosition[1] == 100) ? (bgImgSize[1] - testDiv.height()) : ((bgImgSize[1] - testDiv.height()) * (bgImgPosition[1] * .01));

var props = {
  "divWidth": testDiv.width(),
  "divHeight": testDiv.height(),
  "bgImgWidth": bgImgSize[0],
  "bgImgHeight": bgImgSize[1],
  "bgImgXPosition": bgImgXPosition,
  "bgImgYPosition": bgImgYPosition,
  "bgImg": "https://images.pexels.com/photos/7102/notes-macbook-study-conference.jpg?auto=compress&cs=tinysrgb&h=280&w=400"
}

var c = document.getElementById("test-canvas");
var ctx = c.getContext("2d");
var img = new Image();
img.onload = function() {
  ctx.drawImage(img, props.bgImgXPosition.toFixed(2), props.bgImgYPosition.toFixed(2), props.divWidth, props.divHeight, 0, 0, props.divWidth, props.divHeight);
};
img.src = props.bgImg;

#test {
  width: 200px;
  height: 100px;
  background-image: url(https://images.pexels.com/photos/7102/notes-macbook-study-conference.jpg?auto=compress&cs=tinysrgb&h=280&w=400);
  background-repeat: no-repeat;
  background-size: 400px 267px;
  background-position: 20% 12%; /* Original position */ 
  /* Pixel equivalent: background-position: -40px -20.04px;*/
  /* (image width - div width) *  x background position, (image height - div height) *  y background position */	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test"></div>
<canvas id="test-canvas" width="200px" height="100"></canvas>

根据您将使用的实际值，您当然可以根据需要进行调整。根据您的示例值，我有一个应用了背景图像的 div，然后是一个画布，根据您正在寻找的条件绘制相同的东西。

JSFiddle